在 React 中使用上下文时如何防止不必要的重新渲染？

Question

在我的应用程序中，我想通过context将应用程序的全局存储传递给子组件。为了举例，我创建了 2 个子组件，即Child1和Child2，并将计数器函数以及相应的计数器值传递increment给decrement它们。Child1负责递增counter1和child2递减counter2。当我在组件中调用增量/减量函数时，另一个组件与父组件一起毫无用处地重新渲染。我怎样才能防止这种情况发生？

请在此处找到上述用例

下面是相同的代码，

应用程序.js

import React, { useState, useCallback } from 'react';
import './style.css';
import { UserContext } from './Context.js';
import Child1 from './Child1';
import Child2 from './Child2';

export default function App() {
  const [counter1, setCounter1] = useState(0);
  const [counter2, setCounter2] = useState(0);
  const IncrementCounter = useCallback(
    () => setCounter1((prevState) => prevState + 1),
    [setCounter1]
  );
  const DecrementCounter = useCallback(
    () => setCounter2((prevState) => prevState - 1),
    [setCounter2]
  );
  const store = {
    child1: {
      counter1,
      IncrementCounter,
    },
    child2: {
      counter2,
      DecrementCounter,
    },
  };
  console.log('App re-rendering');
  return (
    <UserContext.Provider value={store}>
      <Child1 />
      <Child2 />
    </UserContext.Provider>
  );
}

Child1.js

import React, { useContext } from 'react';
import { UserContext } from './Context.js';

const Child1 = () => {
  const store = useContext(UserContext);
  const { child1 } = store;
  console.log('Child1 Re-rendering');
  return (
    <div>
      <p>{`Counter1 value : ${child1.counter1}`}</p>
      <button onClick={child1.IncrementCounter}>Increment</button>
    </div>
  );
};

export default React.memo(Child1);

Child2.js

import React, { useContext } from 'react';
import { UserContext } from './Context.js';

const Child2 = () => {
  const store = useContext(UserContext);
  const { child2 } = store;
  console.log('Child2 Re-rendering');
  return (
    <div>
      <p>{`Counter2 value : ${child2.counter2}`}</p>
      <button onClick={child2.DecrementCounter}>Decrement</button>
    </div>
  );
};

export default React.memo(Child2);

上下文.js

import React from 'react';

const UserContext = React.createContext();

export { UserContext };