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页