在使用嵌套上下文的 React 中，如何防止在更新父上下文时重新渲染子上下文？

Question

我正在使用多个上下文从我的数据库中的不同位置获取数据。

在以下代码中，传递给提供程序的“路径”值表示数据库中的路径。 'companys' 中的条目包含引用 'users' 中的条目的 USER_NAME。 “users”中的一个条目包含一个“ITEM_NAME”，它指的是“items”中的一个条目

因此，“MyContext2”需要嵌套在“MyContext1”中，因为它从“MyContext1”获取路径。 和 MyContext3 类似地在 MyContext2 中。

我有一个按钮，按下该按钮时会更新数据库中的值“companys/COMP_NAME/name”。 问题是这会导致 MyContext2 和 MyContext3 重新渲染，即使它的值没有改变。 我怎样才能防止这种情况？

const MyComp = () => {

  return (
    <MyContext1.Provider value={{ path: 'companys/COMP_NAME' }}>
      <MyContext1.Consumer>
        {value => {
          return (
            <MyContext2.Provider value={{ path: `users/${value.userName}` }}>
              <MyContext2.Consumer>
                {value => {
                  return (<MyContext3.Provider value={{ path: `items/${value.itemName}` }}>
                    
                    
                    <MyContext1.Consumer>
                      {value => {
                        return (
                          <Button onClick={() => {
                            value.setData({ name: 'A Test' });
                          }} />
                        );
                      }}
                    </MyContext1.Consumer>

                  </MyContext3.Provider>);
                }}
              </MyContext2.Consumer>


            </MyContext2.Provider>
          );
        }}
      </MyContext1.Consumer>

    </MyContext1.Provider>
  );
};

Answer 1

如果您使用钩子，您可以查看 ReactJS 文档、PureComponent 或 useMemo()。 这使得在状态没有改变时不重新渲染组件成为可能。

https://fr.reactjs.org/docs/hooks-reference.html#usememo