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

Posted 2023-02-23

【中文标题】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 更好地解释它。我可以明确澄清您可能与他们有关的任何问题。