70React-Router 4和react-redux

1、React-Router 4相對2或3幾乎徹底重寫了，遵循 Just Component 的 API 設計理念。一、History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。（1）History 對象的屬性有length；（2）History 對象的方法有back、forward、go、pushState（HTML5特有）、replaceState（HTML5特有）；（3）Location 對象包含有關當前 URL 的信息。Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問；（4）Location 對象的屬性有hash、host、hostname、href、pathname、port、protocol、search；（5）Location 對象的方法有assign、reload、replace二、The Router（1）一或多。v3只有一個<Router>組件，該組件用history屬性監聽瀏覽器地址欄的變化 。v4有3種不一樣的router組件，每種都會建立一個history對象。（2）真或假。在V3中，<Route>不是一個真正的組件，而是做爲一個標籤用來建立route配置對象。在V4中，<Route>是一個真正的組件。（3）嵌套。在v3中， <Router> 組件的子組件，或經過children或routes屬性規定，或經過<Route><Route></Route></Route>內嵌。在v4中，<BrowserRouter>內嵌一個div，div內有一個或多個<Route/>，<Route/>的子組件由<Route/>的component屬性來定義本文來源：https://github.com/YutHelloWorld/Blog/issues/4```javascript<Route path={`${this.props.match.url}/2/:myParams`} component={Second}/><Link to={`${this.props.match.url}/2/${this.state.secondNumber}`}const Second = props => <div> 第二個組件讀取參數{this.props.match.params.myParams}</div>//https://blog.csdn.net/qq20004604/article/details/79440416```2、react-redux提供兩個關鍵模塊：Provider和connect。（1）React-Redux將組件分紅UI組件和容器組件。UI 組件負責 UI 的呈現，由用戶提供；容器組件負責管理數據和邏輯,由 React-Redux 自動生成（2）React-Redux 提供connect方法，用於從 UI 組件生成容器組件。```html:runconst VisibleTodoList = connect(mapStateToProps,mapDispatchToProps)(TodoList)```（3）connect方法接受兩個參數：mapStateToProps和mapDispatchToProps，它們定義了 UI 組件的業務邏輯。A、mapStateToProps負責輸入邏輯，即將state映射成 UI 組件的props。B、mapDispatchToProps負責輸出邏輯，即將用戶對 UI 組件的操做映射成 Action。若是傳遞的是一個對象，那麼每一個定義在該對象的函數都將被看成 Redux action creator，也就是它的每一個鍵名也是對應 UI 組件的同名參數，鍵值應該是一個函數，會被看成 Action creator ，並且這個對象會與 Redux store 綁定在一塊兒，其中所定義的方法名將做爲屬性名，合併到組件的 props 中。若是傳遞的是一個函數，該函數將接收一個 dispatch 函數，而後由你來決定如何返回一個對象。若是省略這個參數，dispatch 會注入到組件 props 中。若是指定了mapDispatchToProps的第二個參數 ownProps，那麼ownProps的值就是傳遞到組件的 props，並且只要組件接收到新 props，mapDispatchToProps 就會被調用。（4）React-Redux 提供Provider組件，經過store屬性「能夠跨級」向下級組件提供state。原理是：Provider接受store做爲其props，並聲明爲context的屬性之一，子組件在聲明瞭contextTypes以後能夠經過this.context.store訪問到store來源：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html來源：http://blog.csdn.net/q1056843325/article/details/548808043、React之使用context傳遞數據與props只能逐級傳遞數據相比，使用context能夠實現跨級傳遞數據。 下面經過一個demo來展現context傳遞數據的實現：//父組件，最上層的組件```html:runimport React, { Component,PropTypes } from 'react';import Son from './Son';class App extends Component {  getChildContext() {      return {test: "hello"};  }  render() {      return (          <div className="App" style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>              <p style={{padding:'0',margin:'0'}}>父組件</p>              <Son/>          </div>      );  }}App.childContextTypes = {    test: PropTypes.string};export default App;//子組件import React, { Component,PropTypes } from 'react';import Grandson from './Grandson';class App extends Component {    render() {        console.log('this.context',this.context);        return (            <div className="son" style={{border:'1px solid blue',width:'60%',margin:'50px auto',textAlign:'center'}}>                <p>子組件，獲取父組件的值：{this.context.test}</p>                <Grandson/>            </div>        );    }}App.contextTypes = {    test: PropTypes.string};export default App;//孫組件import React, { Component,PropTypes } from 'react';class App extends Component {    render() {        console.log('this.context:',this.context);        return (            <div className="son" style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>                <p>孫組件，獲取傳遞下來的值：{this.context.test}</p>            </div>        );    }}App.contextTypes = {    test: PropTypes.string};export default App;```來源：http://blog.csdn.net/abld99/article/details/740114594、store承接了react的state，store裏面的數據是不可修改的，只能返回一個new state。 頁面中全部的渲染操做所需數據來是從store拽下來的 store有四個方法。 getState： 獲取應用當前State。 subscribe：添加一個變化監聽器。 dispatch：分發 action。修改State。 replaceReducer：替換 store 當前用來處理 state 的 reducer。 經常使用的是dispatch，這是修改State的惟一途徑來源：http://blog.csdn.net/lsgqjh/article/details/53455862附一：Redux 的設計思想（1）Web 應用是一個狀態機（生產狀態的），視圖與狀態是一一對應的。（2）全部的狀態，保存在一個對象裏面。（3）Redux是狀態管理器，狀態其實就是這個應用運行的時候須要的各類各樣的動態數據。三大定律：（1）單一數據源（2）state是隻讀的，只有觸發action才能夠修改它（3）使用純函數執行修改。附二：Redux學習筆記https://www.cnblogs.com/xianyulaodi/p/5399264.html附三：React Router 將路由的數據都經過 props傳遞給了頁面組件，能夠直接經過 this.props.params.id 來訪問實際的參數值。來源http://www.jb51.net/article/116304.htm React Router頁面傳值的三種方法；http://blog.csdn.net/qq_23158083/article/details/68488831  Redux大概的過程：用戶觸發了UI上的Action，Action將會被髮送到Reducers方法裏，Reducers將會更新Store的State，State改變，頁面從新渲染。http://blog.csdn.net/zhouziyu2011/article/details/72553093 Redux是這樣運做的：首先須要註冊一個全局惟一的store對象，用來維護整個應用的state；當要變動state時，咱們會dispatch一個action，reducer根據action更新相應的state。最新的狀態存起來（不管是sessionStorage、數據庫仍是其它），而後默認的state去取緩存過的狀態進行初始化渲染便可。 11、React 組件React 組件基本上由 3 個部分組成——屬性（props）、狀態（state）以及生命週期方法。React 組件能夠接收參數，也可能有自身狀態。一旦接收到的參數或自身狀態有所改變，React 組件就會執行相應的生命週期方法，最後渲染。整個過程徹底符合傳統組件所定義的組件職責。（「屬性更新」與「狀態改變」）《深刻React技術棧》第18頁