当 value prop 发生变化时，Provider 的所有消费者都会重新渲染？答案

【问题标题】：All consumers of a Provider will re-render when value prop changes?当 value prop 发生变化时，Provider 的所有消费者都会重新渲染？
【发布时间】：2021-05-27 17:08:29
【问题描述】：

我正在尝试更好地理解 React Context API。在docs 的反应中，我偶然发现了这一段：

作为 Provider 后代的所有消费者都将重新渲染每当 Provider 的 value 属性发生变化时。从传播提供给其后代消费者（包括 .contextType 和 useContext) 不受 shouldComponentUpdate 方法的约束，因此即使祖先组件跳过更新，消费者也会更新。

我很难理解这一点，因为我对消费者的定义有点不清楚。如果我尝试创建一个示例 (codingsandbox)，结果总是相同的：如果值发生变化，则 Provider 的所有子项（不是消费者）都会重新呈现。

我很想了解上述段落的含义。是否存在上下文值更新而不触发其子项的新渲染（最好在函数组件中）的情况？

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

根据您的沙盒，问题是在主应用组件中如何管理状态。

  //your useState
  const [store, setStore] = React.useState([]);
  
  //the button that is setting the state
  <button onClick={() => setStore([])}>Reset store value</button>

这会导致组件中的状态发生变化，这会重新呈现 App 组件本身，从而导致重新呈现它的所有子组件。如果您只想更新上下文状态，则应避免将值存储在状态中，而是直接mount the function within the Context Object 用于更改值对象中属性的逻辑

【讨论】：

好吧，看起来确实像。但在这种情况下，我认为反应文档在这里是错误的。对我来说，消费者并不意味着“所有的孩子”。
@Xen_mar 它暗示了它。毕竟，当您渲染一个组件时，它确实需要为所有子级调用渲染函数（除非他们选择退出，例如 shouldComponentUpdate() 或 React.memo）。
感谢@AKX - 我仍然认为这并不完全正确。对我来说，消费者将是一个使用useContext 或<context.Consumer> 的组件。对我来说，这一段暗示价值变化只会更新消费者及其各自的子树。这意味着组件将与其提供者建立订阅关系，而不是基于道具的关系。
嘿，我已经弄清楚为什么会这样，将编辑答案
毕竟，如果我们看一下 redux 之类的东西，我们还会看到一个基于订阅者-消费者的关系，它只更新各自的子树。