17.精读安全地使用React Context.md

017.精读 如何安全地使用 React context.md

19 年观点: 不建议使用 context

• React context 可以将数据直接传递给组件树的底层组件，无需中间件的参与。

• 注意事项:

1. 第三方库如果要将信息传递给深层次组件时，context 部分无法更新成功
2. 对于一些界面主题，本地化信息，context 被应用于不易改变的全局变量，可以提供一个 HOC，以便 API 更新只改一处
3. 依赖库需要使用 context，请顺便把 HOC 给你

原因

• React.PureCOmponent/shouldComponentUpdate 与包含 Context 库结合引发的一些问题，因为 shouldComponentUpdate 会切断子树的 rerender，state 或 props 没变化时，可能意外中断上层 context 的传播

• 解决方案: context 可变元素可用 observable，表面上述事件监听器的编写，或者使用 Provider + inject

• context 使用场景

• 为组件数提供一种跨层级通信的能力，原本 React 只通过 props 逐层传递数据(单向数据流)

• context 坑

context 相当于全局变量，很难对 context 更新处进行溯源， 组件依赖 context 会使耦合度提高，不利于组件复用和测试。 props 改变或者 setState 被调用，getChildContext 也会被调用，生成新的 Context,shouldComponentUpdate 返回的 false 会 block 住 context，导致没有更新成功

summary

• 引入 context 作为全局变量不利于应用的模块间耦合，在业务中不应该使用，框架和库可以结合场景适当使用