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

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

• 在一個組件中，訂閱消息
• 在另一個組件中，發(fā)布消息

發(fā)布消息之后，訂閱的消息回調函數(shù)會執(zhí)行，在函數(shù)中，我們修改狀態(tài)，這樣就可以實現(xiàn)組件間通信了。這就是reflux框架的實現(xiàn)。

react-redux

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

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

npm install react-redex

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

connect方法

為組件的屬性拓展store中的信息（state，dispatch）的方法

connect方法有兩個參數(shù)，都是函數(shù)

第一個參數(shù)表示如何為組件的屬性拓展store中的state數(shù)據(jù)

參數(shù)是state

返回值是對象，就是為屬性拓展的數(shù)據(jù)

第二個參數(shù)表示如何為組件的屬性拓展store中的dispatch方法

參數(shù)就是dispatch

返回值是對象，就是為屬性拓展的方法

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

參數(shù)是組件

返回值是新組件，這個新的組件就擁有了state數(shù)據(jù)和dispatch方法了

Provider組件

用來為應用程序提供store對象的組件

store屬性，就是綁定添加的store

Provider組件中我們可以渲染應用程序組件

在應用程序中，這些被connect方法處理的組件就會接收store中的數(shù)據(jù)了

注意：只有通過connect的處理方法處理之后的組件具有state和dispatch，其他的組件沒有這些信息

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

• 第一種，具有state數(shù)據(jù)和dispatch方法的組件中，向子組件傳遞（最常用）
• 第二種，再用處理方法，處理其他的組件。

路由

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

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

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

npm install react-router-dom

使用路由

使用路由分成三步：

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

• 可以通過Swtich組件定義
• 可以通過Route組件定義每一條路由規(guī)則
• path 定義路由規(guī)則
• component定義路由渲染的組件
• name 定義路由的名稱

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

常用的有兩種:

• BrowserRouter：基于path，實現(xiàn)的路由規(guī)則，需要服務器端的配合
• HashRouter：基于hash，實現(xiàn)的路由規(guī)則，不需要服務器端配合
  • 我們通過路由渲染模式組件，渲染應用程序
  • 將應用程序組件，定義在該組件內

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

默認路由

在react路由中，讓path匹配*，即可定義默認路由

由于??*??匹配的非常廣，因此我們常常把它配置在最后面

路由重定向

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

from定義匹配的規(guī)則

to定義重定向的規(guī)則

獲取路由參數(shù)

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

history表示對全局的history歷史對象的模擬

location表示對全局的location對象的模塊，但是只是處理路由這一部分

match表示路由數(shù)據(jù)對象（解析后的數(shù)據(jù)，因此工作中常用）

其他沒有通過路由渲染的組件是不具備這些信息，想具有這些信息，我們可以通過組件間通信的技術，依次傳遞這些數(shù)據(jù)信息

路由導航

我們通過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定義規(guī)則*/}
<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)
// 解構數(shù)據(jù)
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 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論