reactjs – 使用React`context`在无流量应用程序中访问模型mutat

发布时间：2020-12-15 20:31:27 所属栏目：百科来源：网络整理

导读：我正在开始一个新的React应用程序,并且看到生态系统中的所有新闻,我想慢慢地实际考虑我的选择,从React / Webpack / Babel开始,并引入更多. 这些选择中的第一个是否使用Flux(更确切地说,Redux,它看起来很棒并且似乎赢得了助威战争).我就是这样的地方：我理解

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

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

>我理解Redux的好处,summarized on SO by Dan Abramov.它们看起来很棒,但我宁愿一步一步地介绍.
>在简单的React中,父级→子级通信使用道具完成,子级→父级通信使用回调.请参阅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.

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

>听起来很健全吗？
>任何其他简单的React建议方便孩子→家长沟通？

谢谢.

解决方法

观看Dan Abramov的 Getting Started with Redux系列后回答我自己的问题,我热烈推荐.

是的,看起来它是理智的：Redux面临同样的问题并用Context解决了它(至少在最初阶段,实现可能已经改变).它在< Provider>下的react-redux绑定中实现和打包(以及其他内容).组件和connect()函数.

>最初,在步骤24 – Passing the Store Down Explicitly via Props 开始时,我们有一个Todo应用程序,其中Redux存储可用作顶级变量.这很糟糕(对于1.可测试性/可模拟性,2.服务器渲染需要“每个请求的不同存储实例,因为不同的请求具有不同的数据”),因此存储从顶级变量降级为根组件prop.
>在我的情况下,必须将商店作为prop传递给每个组件是令人讨厌的,因此在25 – Passing the Store Down Implicitly via Context中,Dan演示使用Context将Redux存储传递给任意嵌套的组件.
>接下来是26 – Passing the Store Down with <Provider> from react-redux,解释了它是如何封装在react-redux绑定中的.
> 27 – Generating Containers with connect() from React Redux进一步封装了表示组件生成容器组件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!