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

Question

I'm using multiple context to get the data from various locations in my database.

In the following code, the 'path' value passed to the provider represents the path in the database. An entry in 'companys' contains a USER_NAME that refers to an entry in 'users'. An entry in 'users' contains a 'ITEM_NAME' that refers to an entry in 'items'

Therefore, 'MyContext2' needs to be nested in 'MyContext1', since it gets its path from 'MyContext1'. And MyContext3 is in MyContext2 similarly.

I have a button that when pressed updated the value 'companys/COMP_NAME/name' in the database. the problem is that this causes MyContext2 and MyContext3 to rerender, even though its values havent changed. How can I prevent this?

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

You can check the ReactJS documentation, the PureComponent or useMemo() if you are using hooks. This makes it possible not to re-render components when the state has not changed.

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