React初学关于组件数据传递方面的一点疑惑?

Question

React组件之间(父子组件 兄弟组件)之间的数据传递都是通过state props来进行传递的。
问题是，我在实际这么用的时候，如果组件的层级深度比较深的时候，往往感觉这种数据的传递过程比较长，往往跟踪一个state/props跨越了好几个组件，处理起来感觉很复杂。

有什么更好的处理方式，是不是这种情况下就需要去学习使用Redux？或者说Redux/Flux就是为了解决这种问题的？

比如如下组件结构

<A>
    <B>
        <C />
    </B>
</A>

最外层组件A的用户操作影响组件C的状态，然后需要一个值(state/props)数据传递到组件C改变其state/props 重新渲染组件C

Answer 1

当组件的层级深度比较深的时候，正解是要使用React中的Context特性，简单来说它是一种具有穿透组件层级数据流的特性。说明白些，在Redux, Flux, MobX与React Router(路由器)这些库都是利用这个特性来作数据流的获取工作。

但Context是一个有可能因版本更新后经常更动的实验性质特性，官方并不建议用于生产的开发之中(不过上面这些库都用了，这说明...是有点矛盾)。主要说出来是它是属于高级的API，怕开发者滥用了。

实际来说，你可以使用这个Context特性，如果你的应用很小，用不著Redux或Flux时。当然，你需要知道它是如何使用与注意一些情况，例如不要把什么数据都往它塞，尤其是全局的数据。用多了你的应用也有可能会影响到效率。最后，因为它会因升版而变动，有可能你在升级时，需要再调整一下。

如果你的应用很复杂，应用很大，就不要用Context特性，改用Redux或Flux，它们里面有比较良好的状态(state)管控机制，用了它们就不需要再使用React组件中的状态(state)来控管组件的状态。它们里面都有可以穿透组件数据流的设计。

网上都可以找到一些Context特性的文章，但最好看新一点的说明，要不然就看官网的。因为它常会更动，你找到旧一些的可能早就弃用或改作法了。

Answer 2

不用Redux，你可以试试context，用context可以很方便的把父组件的属性传递给深层次的组件，需要使用context的组件只需设置contextTypes 即可。

下面是官网给出的例子

class Button extends React.Component { //子组件
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {  //设置contextTypes 
  color: React.PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component { //父组件
  getChildContext() {                       //设置getChildContext
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {  //设置childContextTypes 
  color: React.PropTypes.string
};

Answer 3

是的，Redux可以解决这个问题。

而且数据并不一定非要从很高的层级向下传。也可以由中间层级获取数据，再往下传。

可以看看Redux和Container&Component模型，或许对你有帮助

Answer 4

传送门: Redux简单教程 ~

Answer 5

1. React本身的数据流都是从父组件向子组件的单向流动。如果需要父组件操作来更改子组件状态，通常可以使用ref来引用子组件，并调用能更改自身状态的方法即可。如果层级较深，可能就需要多层引用再多层访问的方式。形如this.refComponent.refComponent.refComponent.method()这种很繁琐的东西。

2. 当然最好的方式还是使用redux啊，就像发布订阅模式，其中一个组件关联到了store中的state，在其他任意组件中通过dispatch一个对应组件的action，就可以自动改变该组件的状态。组件间就可以轻松通信，不用麻烦的逐层传递了。

Answer 6

多层级使用redux , 简单可以父组件传入一个方法到子组件中调用.

Answer 7

redux 是正解，用props和ref都太累，不过只要组件层级结构不多，建议不要用redux，节省带宽

Answer 8

如果组件多且嵌套层级多的话，A传B传C传D的情况是不可避免的，用 redux 其实也不能解决这种问题。
如果非要说避免的话，建议你看一下自己的 components 粒度是不是写的过细了？

Answer 9

父子组件props，其他组件redux。