Question

这个问题严重影响了我的表现。在每次状态更改时，都会重新渲染我的孩子们的状态。有什么办法可以摆脱这个？如何防止子组件不受此类重新渲染的影响。请帮忙。


import React from "react";

const Content = ({children}) => {
  console.log("I am rendering multiple times on each update");

  return children;
};

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button>

      <Content>
      <p>test-children</p>
      </Content>
    </>
  );
}

Answer 1

使用 React.memo ，这是一个返回新的备注组件的高阶组件。

记住的组件如果其道具没有更改，将不会触发重新渲染。

import React from "react";

const Content = () => {
  console.log("I am rendering multiple time on each open sidebar");
  return <div>test-content</div>;
};

const MemoizedContent = React.memo(Content);

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button>
      <MemoizedContent />
    </>
  );
}

您可以了解有关React.memo here

的更多信息

Answer 2

为避免重新渲染，您应在组件React.memo组件中使用Content，如下所示：

const Content = React.memo(() =>  {
...
});

通过这种方式，组件将比较道具并仅在属性更改时再次渲染，而在这种情况下不会更改。

React（Performance）：如何防止每次状态更改时出现不必要的渲染？

2 个答案: