Компоненты, которые не потребляют из контекста, все еще перерисовывают

Question

Как я могу убедиться, что только нужные компоненты будут перерисованы?

У меня есть этот пример codesandbox .

Я хочу контролировать состояние в этом контекст из моего компонента верхнего уровня, но все же я хочу убедиться, что компонент SomeOtherComponent не будет перерисован.

// index.js
function App() {
  const [count, setCount] = useState(0);

  const memo = useMemo(
    () => ({
      currentCount: count,
      setCurrentCount: setCount
    }),
    [count]
  );

  return (
    <div className="App">
      <CountDisplayContext.Provider value={memo}>
        <Content />
      </CountDisplayContext.Provider>
    </div>
  );
}

// CountDisplay.js
export const CountDisplayContext = createContext({
  currentCount: 0,
  setCurrentCount: () => {}
});

export default () => {
  const { currentCount, setCurrentCount } = useContext(CountDisplayContext);

  return (
    <div>
      <p>Count: {currentCount}</p>
      <button onClick={() => setCurrentCount(currentCount + 1)}>
        Increment!
      </button>
    </div>
  );
};

// Content.js
export default () => {
  return (
    <div>
      <h1>My Display component</h1>
      <CountDisplay />
      <hr />
      <SomeOtherComponent />
    </div>
  );
};

// SomeOtherComponent.js
export default () => {
  console.log("I don't want this to be re-rendered all the time!");
  return <div>Hello</div>;
};

Answer 1

Вы можете подписаться на эту оптимизацию, обернув ваш компонент с React.memo.

// SomeOtherComponent.js
export default React.memo(() => {
  console.log("I don't want this to be re-rendered all the time!");
  return <div>Hello</div>;
});

Это сделает так, что SomeOtherComponent будет повторно отображаться только при наличии реквизита. он получает отличается от предыдущего рендера.

Также, вы можете найти этот текст полезным. Это говорит об этом глубже.