React中react-redux和路由詳解

2022-08-28 22:00:39

觀察者模式解決元件間通訊問題

使用觀察者解決元件間通訊，分成兩步

在一個元件中，訂閱訊息
在另一個元件中，釋出訊息

釋出訊息之後，訂閱的訊息回撥函數會執行，在函數中，我們修改狀態，這樣就可以實現元件間通訊了。這就是reflux框架的實現。

react-redux

redux早期被設計成可以在各個框架中使用，因此在不同的框架中使用的時候，要引入相應的外掛

在react中使用要引入react-redux，因此我們要安裝這個模組

npm install react-redex

react-redux提供了一個方法和一個元件:

connect方法

為元件的屬性拓展store中的資訊（state，dispatch）的方法

connect方法有兩個引數，都是函數

第一個參數列示如何為元件的屬性拓展store中的state資料

引數是state

返回值是物件，就是為屬性拓展的資料

第二個參數列示如何為元件的屬性拓展store中的dispatch方法

引數就是dispatch

返回值是物件，就是為屬性拓展的方法

connect方法的返回值是一個新方法，就是為元件拓展的方法。

引數是元件

返回值是新元件，這個新的元件就擁有了state資料和dispatch方法了

Provider元件

用來為應用程式提供store物件的元件

store屬性，就是繫結新增的store

Provider元件中我們可以渲染應用程式元件

在應用程式中，這些被connect方法處理的元件就會接收store中的資料了

注意：只有通過connect的處理方法處理之後的元件具有state和dispatch，其他的元件沒有這些資訊

想讓其它元件具有store中的state和dispatch，有兩種途徑：

第一種，具有state資料和dispatch方法的元件中，向子元件傳遞（最常用）
第二種，再用處理方法，處理其他的元件。

路由

從14版本開始，react路由為了實現react多端適配的理想，將react路由拆分成不同型別的。

例如在web端要使用web端路由，在native端要使用nativate路由等等

我們開發web端，要安裝react-router-dom路由

npm install react-router-dom

使用路由

使用路由分成三步：

第一步定義路由渲染容器元素（渲染位置）

可以通過Swtich元件定義
可以通過Route元件定義每一條路由規則
path 定義路由規則
component定義路由渲染的元件
name 定義路由的名稱

第二步定義路由的渲染方式（規則）

常用的有兩種:

BrowserRouter：基於path，實現的路由規則，需要伺服器端的配合
HashRouter：基於hash，實現的路由規則，不需要伺服器端配合
- 我們通過路由渲染模式元件，渲染應用程式
- 將應用程式元件，定義在該元件內

第三步用render方法，渲染第二步得到的結果

預設路由

在react路由中，讓path匹配*，即可定義預設路由

由於*匹配的非常廣，因此我們常常把它設定在最後面

路由重定向

我們通過Redirect元件定義重定向路由

from定義匹配的規則

to定義重定向的規則

獲取路由引數

在react中，我們使用路由的元件，會自動拓展一些屬性

history表示對全域性的history歷史物件的模擬

location表示對全域性的location物件的模組，但是隻是處理路由這一部分

match表示路由資料物件（解析後的資料，因此工作中常用）

其他沒有通過路由渲染的元件是不具備這些資訊，想具有這些資訊，我們可以通過元件間通訊的技術，依次傳遞這些資料資訊

路由導航

我們通過Link元件定義路由導航

通過to屬性定義導航地址，即使是hash路由也不要加#

預設渲染成a標籤

舉例：

// 引入路由
import { Switch, Route, HashRouter, Redirect, Link } from 'react-router-dom';
// 應用程式
class App extends Component {
render() {
console.log('app', this)
return (
<div>
<h1>app</h1>
{/*導航*/}
<Link to="/home">首頁</Link>
<Link to="/list/17">列表頁</Link>
<Link to="/detail/17">詳情頁</Link>
{/*第一步 定義路由渲染位置*/}
<Switch>
{/*Route定義規則*/}
<Route path="/home" component={Home}></Route>
<Route path="/list/:page" component={List}></Route>
<Route path="/detail/:id" component={Detail}></Route>
{/*輸入ickt進入detail/ickt詳情頁*/}
<Redirect from="/ickt" to="/detail/ickt"></Redirect>
{/*預設路由*/}
<Route path="*" component={Home}></Route>
</Switch>
</div>
)
}
}
// 首頁
class Home extends Component {
render() {
console.log('home', this)
return (
<div>
<h1>home</h1>
</div>
)
}
}
// 列表頁
class List extends Component {
render() {
console.log('list', this)
return (
<div>
<h1>list</h1>
</div>
)
}
}
// 詳情頁
class Detail extends Component {
render() {
console.log('detail', this)
// 解構資料
let { history, match } = this.props;
return (
<div>
<h1>detail</h1>
<Demo history={history} match={match}></Demo>
</div>
)
}
}
// 詳情頁
class Demo extends Component {
render() {
console.log('demo', this)
return (
<div>
<h2>demo</h2>
</div>
)
}
}
// 第二步 確定渲染方式
let routes = (
<HashRouter>
<App></App>
</HashRouter>
)
// 第三步 渲染第二步結果
render(routes, app)

到此這篇關於React中react-redux和路由詳解的文章就介紹到這了,更多相關React react-redux 內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！