React Context 和 useContext

Posted 2023-04-24

参考技术A 在 React 使用过程中，公共信息，例如语言，主题等如何传递给每个组件呢

而当组件层级不多不少的时候，共享的数据也不多时，这个时候会稍微有些尴尬，用 props 会有点繁琐， 而用 Redux 又不至于。那就可以考虑 Context。

Context 可以实现隔层传递，只需要在顶层组件定义，然后在子组件中按需引入即可，从而避免了一层一层的手动传递 props 属性。

Context 使用并不复杂，直接看看具体使用示例吧：

与 Context 一样，在 React Hooks 中也提供了更加高级的一种组件中传递值的方式，不再需要一层一层的向下传递，而是可以隔层传递。

想了解更多 hooks 的功能，可以看看我关于 React Hooks 的一篇文章。

https://www.jianshu.com/p/51b436cb63b4

React 库中的 context 和 updater 参数是啥？

【中文标题】React 库中的 context 和 updater 参数是啥？

【英文标题】：What are context and updater arguments in the React library?React 库中的 context 和 updater 参数是什么？

【发布时间】：2018-06-14 20:43:26

【问题描述】：

我试图通过React library 理解React，但无法理解context 和updater 是什么，它们传递给组件。

以下是库中的代码。

function Component(props, context, updater) 
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;

这些东西的目的是什么？

【问题讨论】：

你看过 ReactNoopUpdateQueue 或 React 代码库中具有类似名称的方法的任何其他对象吗？他们可能会回答你的一些问题:-)

嗨@SeanVieira，谢谢你的帮助，我也无法从那个文件中理解，如果你有时间，你能简要介绍一下吗？谢谢。

【参考方案1】：

Context

Context 的引入是为了让开发人员能够直接将 props 传递给组件，而不是通过 prop drilling 的方式通过每个中间组件的属性（相对较快会变得过于繁琐）。

在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动向下传递道具。您可以使用强大的“上下文”API 在 React 中直接执行此操作。

---

更新程序

updater 是一个包含methods 的object，用于更新DOM。

这在61 和79 行中很明显。

// Line 61: Enqueue setState.
this.updater.enqueueSetState(this, partialState, callback, 'setState') 

// Line 79: Force Update.
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate') 

这些methods 分别使用setState() 和forceUpdate() 触发。

【讨论】：

非常感谢@ArmanCharan。你能举个例子吗：In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful “context” API.

我认为我无法比the official docs 更好地解释它。我可以明确澄清您可能与他们有关的任何问题。