Redux(一):React的单项数据流和Redux的诞生的原因

2016-12-05

React的单项数据流

React最引以为傲的特性就是其“优雅的单向数据流”，用数据来控制界面，打破了MVC这种“禁锢”了开发者二三十年的老顽固，所以叫做RE-ACT(重做，重制，重定义)，它是一种新的思想。

单项数据流的问题

单向数据流有个麻烦就是—— 不同的Component之间通信 的问题，React的Component有两个概念 props 和 state 说白了就是public和private变量，那么从A组件传递数据到B组件，必然需要通过public概念的 props 这条途径。

父子组件通信

如果父子组件进行通信，那么单项数据流是很简单的，只需要在父亲组件里把数据赋值给Child组件即可

class Father extends React.Component {

  ......  

  render() {
    return (
      <Child data={Father.state} />
      )
  }
}

子组件之间通信

如果两个 同级的子组件 应该怎么通讯呢？那就必须找到他们共同的父控件，才能进行数据交换

class Father extends React.Component {

  exchangeData = ()=>{}

  render() {
    return (
      <Child1 data={Father.exchangeData} />
      <Child2 data={Father.exchangeData} />
      )
  }
}

这就有个很严重的问题如果组件A和组件B不在同一级,且共同的父组件嵌套了很多层,岂不是为了传递数据，就要在每一层都写一个props用来作为通道？层级关系如下

Father                <==exchange方法在这里
  ----Middle1-1       <==exchange方法传递到1-1props-------------(通道层)
    ----Middle1-2     <==1-1的props再传递给1-2的props-----------(通道层)
      ----Middle1-3   <==1-2的props传递给1-3的props-------------(通道层)
        ----ChildA    <==从1-3的props里接收exchange数据
  ----Middle2-1       <==exchange方法传递到2-1的props-----------(通道层)
    ----Middle2-2     <==2-1的props传递给2-2的props-------------(通道层)
      ----ChildB      <==从2-2的props里接受exchange数据

这简直太坑爹了，为了两个Component通信我们竟然需要5个通道层为了解决这个问题Facebook提出了一个Flux方案，来解决组件间通信的问题。

如何解决数据流的问题

在Flux的基础上，开源组织作出了Redux来解决这个问题，虽然Redux和React并不是绑定的，也可以应用于Angular等，但是目前在React解决数据通信问题中十分流行。

组件间通讯的方式

不同的Object之间进行通讯，一般有两种方式

通信方式	渠道	原理	例子
通知方式	利用中转	需要另外一个线程或Object作为中转站，进行Key Value Observer形式的收发消息	iOS的通知中心
消息方式	点对点发送	通过获取到目标组件的地址，来点对点发送某个消息，调用某个方法	iOS的protocol

听某位大师说还有另外一种通信方式是C++的COM解决方案。。。没有查到详细的

Redux 采用的哪种方式

Redux采用的是 通知方式 的组件间通信，分为Action，Reducer，Store 来完成KVO的概念

功能	作用
Action	发送消息给Reducer
Reducer	接受消息，并且执行相应逻辑
Store	保存数据

具体使用方法请参考文章Redux，说白了Redux就是一个独立于React的大Object，保存了一些数据，组件间通过去Redux读取逻辑处理后的数据，来进行通信。

Redux如何和React结合

上文提到Redux只是一种数据流的控制方法，并不必须和React绑定，所以说会有两个库

库名	作用
Redux	提供Redeux的三个基本方法
React-Redux	React中的Reduce，提供Connect和Provide方法

当我们在使用React中使用Redux时，一般来讲是指的使用Redux 加上 React-Redux两者，其中Redux负责控制数据流，而 React-Redux负责嵌入到React中，在遵循React的单向数据流的前提下，减少代码编写量

具体参考文章React-Redux