Javascript 使用useContext进行不必要的重新加载

在这个

我在每个推荐中使用了两个上下文。但我可能误解了，也许github的问题是指另一个案例？因为它似乎不能解决我的问题

上面代码的问题是，如果我单击change1按钮，它会更改value1，组件显示2也会重新呈现，甚至不会使用value1

事实上，这对我来说是有意义的，因为我在应用程序中更改了状态，所以它会重新启动它的所有子项。但是我不明白github链接中推荐的用法，因为它没有解决我的问题

---

如果您有大型应用程序和根上下文提供程序，这可能会在性能方面出现问题。

通常，但并非总是，您希望记住提供程序的子级以避免出现这种情况。 在本例中，Display1和Display2可以是PureComponent，也可以只是

const Display1 = React.memo(() => <Whatever />)

---

您链接的github问题涉及另一个问题：您的提供商包含大量数据，您只想订阅其中的一部分。在某些情况下，您可能会更新上下文的一个值，而它将重新呈现未使用该值的使用者。在这种情况下，您可能只想在多个上下文中拆分它，如前所述。但这不是你的问题。

通常，也不总是，你希望记住提供者的孩子以避免这种情况。 在本例中，Display1和Display2可以是PureComponent，也可以只是

const Display1 = React.memo(() => <Whatever />)

您链接的github问题涉及另一个问题：您的提供商包含大量数据，您只想订阅其中的一部分。在某些情况下，您可能会更新上下文的一个值，而它将重新呈现未使用该值的使用者。在这种情况下，您可能只想在多个上下文中拆分它，如前所述。但这不是您的问题。

请尝试仅在其本地状态更改时渲染：

const MemoDisplay = React.memo(Display1);
const MemoDisplay2 = React.memo(Display2);

function App() {
  ...
  return (
    <React.Fragment>
      ...
      <JediContext1.Provider value={value1}>
        <MemoDisplay />
      </JediContext1.Provider>
      <JediContext2.Provider value={value2}>
        <MemoDisplay2 />
      </JediContext2.Provider>
    </React.Fragment>
  );
}

请注意日志，之后没有不必要的渲染。

请尝试仅在其本地状态更改时渲染：

const MemoDisplay = React.memo(Display1);
const MemoDisplay2 = React.memo(Display2);

function App() {
  ...
  return (
    <React.Fragment>
      ...
      <JediContext1.Provider value={value1}>
        <MemoDisplay />
      </JediContext1.Provider>
      <JediContext2.Provider value={value2}>
        <MemoDisplay2 />
      </JediContext2.Provider>
    </React.Fragment>
  );
}

---

注意日志，之后没有不必要的渲染。

这是已知的，但由于未知原因，已经讨论过了。与钩子无关，只与上下文API的工作方式有关。希望有人能很快用例子写出好的答案。这是已知的事情，但不知为什么已经讨论过了。与钩子无关，只与上下文API的工作方式有关。希望有人能很快用例子写出好的答案。1一旦我更新了一个托管提供商的组件，它就会导致其所有子组件都重新加载，所以我现在看不到github建议适用的示例，如果您也能详细说明的话，我相信很多人都会觉得这很有用。2在我的情况下，你说通常不总是有替代方案，你的意思是？对不起，你能澄清什么需要更多的细节/澄清吗？1一旦我更新了托管提供商的组件，它会导致其所有子组件重新加载，所以我现在看不到github建议适用的示例，如果你能详细说明一下，我相信很多人会觉得这很有用。2在我的情况下，你说通常不总是有替代方案吗？对不起，你能澄清什么需要更多的细节/澄清吗？