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

问题描述

问 题

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

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

比如如下组件结构

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

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

解决方案

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

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

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

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

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

这篇关于javascript - React初学关于组件数据传递方面的一点疑惑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！