Question

如何确保仅正确渲染组件？

我有这个示例codesandbox。

我想从我的顶级组件控制该上下文中的状态，但我仍然要确保<Ctrl-x>组件不会被重新呈现。

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>
  );
};

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仅在收到的任何道具与先前渲染不同的情况下才重新渲染。

此外，您可能会发现this writing有用。它讨论得更深。

不会从上下文消耗的组件仍会重新渲染

1 个答案: