Javascript 在React using nested context中，当父上下文被更新时，如何防止子上下文被重新引用？

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

在下面的代码中，传递给提供程序的“path”值表示数据库中的路径。“公司”中的条目包含引用“用户”中条目的用户名。“用户”中的条目包含引用“条目”中条目的“条目名称”

因此，“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>
  );
};

常量mycop=（）=>{
返回(
{value=>{
返回(
{value=>{
返回(
{value=>{
返回(
{
setData（{name:'A Test'}）；
}} />
);
}}
);
}}
);
}}
);
};

如果使用钩子，可以查看ReactJS文档、PureComponent或useMemo（）。这使得在状态未更改时不重新渲染组件成为可能

---

查看Redux，它是一种状态管理工具，在这种情况下可以帮助您。