70React-Router 4和react-redux

一、React-Router 4相对2或3几乎完全重写了，遵循 Just Component 的 API 设计理念。
1、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
2、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
```

二、react-redux提供两个关键模块：Provider和connect。
（1）React-Redux将组件分成UI组件和容器组件。UI 组件负责 UI 的呈现，由用户提供；容器组件负责管理数据和逻辑,由 React-Redux 自动生成
（2）React-Redux 提供connect方法，用于从 UI 组件生成容器组件。
```html:run
const 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/54880804

三、React之使用context传递数据
与props只能逐级传递数据相比，使用context可以实现跨级传递数据。 
下面通过一个demo来展示context传递数据的实现：
//父组件，最上层的组件
```html:run
import 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/74011459

四、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去取缓存过的状态进行初始化渲染即可。
 十一、React 组件
React 组件基本上由 3 个部分组成——属性（props）、状态（state）以及生命周期方法。React 组件可以接收参数，也可能有自身状态。一旦接收到的参数或自身状态有所改变，React 组件就会执行相应的生命周期方法，最后渲染。整个过程完全符合传统组件所定义的组件职责。（“属性更新”与“状态改变”）《深入React技术栈》第18页