React数据管理

React Redux

假设有这么一棵组件树

Com4从App中获取数据，需要一层一层的传下来，有的中间组件可能只是用来传递数据用，同理，Com4向App传递数据，也要通过回调函数一层层往上传，再这样的情况下，代码实在是比较臃肿，不仅写出了很多不必要的代码，而且使得数据也比较难以理解。

假设有这么一个中央仓库，任何组件都可以直接存储和更改数据，而不需要一层层的传递

不管组件处于多深的层次，都可以从store中直接拿取数据。所以这个想法怎么做到呢?

Context

首先来介绍React中你可能永远不会用到的特性context。我们在父组件中它下面的子组件通过context的方式提供数据，其中的任意子组件均可以通过context访问数据，这就使得context相当于中央仓库，那怎么用呢(为了演示方便，就写父子两层)?

点击查看【codepen】

在上面用到了PropTypes，所以需要下载prop-types，使用npm下载

cnpm install prop-types --save

首先父组件提供context要声明提供的数据名称以及对应的类型

static childContextTypes = {
    data: PropTypes.string
}

然后在getChildContext中返回数据

getChildContext () {
    return {
      data: "data"
    }
}

而子组件要使用父组件提供的数据，首先要声明要使用的数据是什么以及类型

static contextTypes = {
    data: PropTypes.string
}

只有这样才可以通过this.context获取想要的数据

<div>Child中获取Context：{this.context.data}</div>

context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。

但是这种机制对于前端应用状态管理来说是很有帮助的，因为毕竟很多状态都会在组件之间进行共享，context 会给我们带来很大的方便。一些第三方的前端应用状态管理的库（例如 Redux）就是充分地利用了这种机制给我们提供便利的状态管理服务。但我们一般不需要手动写 context，也不要用它，只需要用好这些第三方的应用状态管理库就行了。

Redux + React Redux

本来还想继续写Redux，React-Redux的，但是我发现React.js 小书写的实在是太好了，推荐仔细阅读其中的Redux和React-Redux的部分。