React中react-redux和路由詳解

Posted on by

觀察者模式解決組件間通信問題

使用觀察者解決組件間通信，分成兩步

  • 在一個組件中，訂閱消息
  • 在另一個組件中，發佈消息

發佈消息之後，訂閱的消息回調函數會執行，在函數中，我們修改狀態，這樣就可以實現組件間通信瞭。這就是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 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：