reactjs - 在无 Flux 应用程序中使用 React `context` 访问模型更改器(mutator)是否合理？

Question

我正在启动一个新的 React 应用程序，看到生态系统中的所有新闻，我想慢慢来，实际考虑我的选择，从 React/Webpack/Babel 开始，然后引入更多。

第一个选择是是否使用 Flux(更准确地说，Redux，它看起来很棒并且似乎赢得了 Flux 之战)。这是我现在的位置:

1. 我了解 Redux 的优势，summarized on SO by Dan Abramov 。它们看起来很棒，但我宁愿一次一步地介绍内容。
2. 在普通的 React 中，父→子通信是通过 props 完成的，子→父通信是通过回调进行的。请参阅Doc / Communicate Between Components ，或SO / Child to parent communication in React (JSX) without flux ，或this codeacademy Redux tutorial首先说“如果你对普通 React 和根组件中的所有数据都满意，则不需要 Redux”。
   • 这看起来很适合我的目的......
   • ...然而，令人难过的是这些回调必须沿着组件链向下传递，这很快就会变得tedious as the levels of nesting grow .

为了在不引入新依赖项的情况下解决此问题，我发现了两篇文章( 1: Andrew Farmer 、 2: Hao Chuan )鼓励使用最近引入的 context feature of React .

→ 使用 context 可以让我向子组件公开模型突变回调。对我来说，这听起来不像是可怕的误用:我不会传递模型数据，而只是引用用于绑定(bind)事件处理程序的函数。

• 听起来合理吗？
• 还有其他方便 child →家长沟通的 plain-React 建议吗？

谢谢。

Answer 1

在观看 Dan Abramov 的 Getting Started with Redux 后回答我自己的问题系列，我强烈推荐。

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

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

2. 就我而言，必须将 store 作为 prop 传递给每个组件很烦人，所以在 25 - Passing the Store Down Implicitly via Context 中，Dan 演示了使用 Context将 Redux 存储传递给任意嵌套的组件。

3. 后面是 26 - Passing the Store Down with <Provider> from react-redux ，解释如何将其封装在 react-redux 中绑定(bind)。

4. 和27 - Generating Containers with connect() from React Redux进一步封装了从展示组件生成容器组件。