使用React`context`来访问无Flux应用程序中的模型mutators是否合理？

Question

我正在开始一个新的React应用程序,并且看到生态系统中的所有新闻,我想慢慢地实际考虑我的选择,从React/Webpack/Babel开始,并引入更多.

这些选择中的第一个是否使用Flux(更确切地说,Redux,它看起来很棒并且似乎赢得了助威战争).我就是这样的地方:

1. 我了解Redux的好处,由Dan Abramov总结为SO.它们看起来很棒,但我宁愿一步一步地介绍一下.
2. 在简单的React中,父级→子级通信使用道具完成,子级→父级通信使用回调.请参阅文档/组件之间的通信,或SO/Child到React(JSX)中没有流量的父通信,或者这个codeacademy Redux教程,首先说"如果你对普通的React和你的所有数据都没问题就不需要Redux根组件".
   • 哪个看起来很适合我的目的......
   • ... 然而,令人遗憾的是,这些回调必须在组件链中传递,随着嵌套级别的增长,这变得很快.

为了解决这个问题而不引入新的依赖关系,我发现两篇文章(1:Andrew Farmer,2:Hao Chuan)鼓励使用最近引入的React上下文特性.

→使用context将让我将模型变异回调暴露给我的子组件.对我而言,这听起来不像是一个可怕的误用:我不会传递模型数据,只是引用用于绑定事件处理程序的函数.

• 听起来很健全吗？
• 是否有其他简单的React建议方便儿童→家长沟通？

谢谢.

Answer 1

在观看我强烈推荐的 Dan Abramov 的Redux 入门系列后回答我自己的问题。

是的，看起来很正常：Redux 面临着同样的问题并解决了它Context（至少在最初，实现可能已经改变）。它在组件和函数react-redux下的绑定中实现和封装（除其他外）。<Provider>connect()

1. 最初，在步骤24 - 通过 Props 显式传递 Store开始时，我们有一个 Todo 应用程序，其中有一个 Redux 存储可用作顶级变量。这很糟糕（对于 1. 可测试性/可模拟性，2. 服务器渲染需要“每个请求都有不同的存储实例，因为不同的请求有不同的数据”），因此存储从顶级变量降级为根组件道具。

2. 就我而言，必须将 store 作为 prop 传递给每个组件是很烦人的，因此在25 - 通过 Context 隐式传递 Store 中，Dan 演示了如何Context将 Redux store 传递给任意嵌套的组件。

3. 接下来是26 -通过 React-Redux传递 Store<Provider>，解释了如何将其封装在react-redux绑定中。

4. 27 - 使用connect()React Redux生成容器进一步封装了从演示组件生成容器组件。