React（性能）：如何防止每次状态更改时出现不必要的渲染？ [复制]

Posted 2023-02-21

【中文标题】React（性能）：如何防止每次状态更改时出现不必要的渲染？ [复制]

【英文标题】：React (Performance): How to prevent unwanted rendering on each state change? [duplicate]

【发布时间】：2020-10-02 06:49:54

【问题描述】：

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

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

【问题讨论】：

React.memo for Content

@HMR 试过了，但没有帮助，因为有时我想在备忘录不支持的内容上传递儿童道具

@AnugrahaAcharya 您可能会发现 Dan Abramov 的 detailed answer 很有帮助。

@AnugrahaAcharya 我无法再次打开这个问题，但你是对的，如果组件有子组件，即使所有子组件本身都是纯组件，它也会重新渲染。也许您可以创建一个新问题，专门询问如何在使用儿童时防止重新渲染。我认为，如果您使用的是子组件，则不要让组件进行其他繁重的计算或渲染，当子组件是纯子时，您应该不会有性能问题。

感谢@HMR。它帮助了我。我最终得到类似codesandbox.io/s/prevent-renders-on-sidebar-toggle-lmo4j?file=/…

【参考方案1】：

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

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

这样组件将浅层比较 props，并且仅在属性更改时再次渲染，在这种情况下不会。

【讨论】：

我最终得到了这样的结果。通过使用react-fast-compare 和react.memo codesandbox.io/s/prevent-renders-on-sidebar-toggle-lmo4j?file=/…

【参考方案2】：

使用 React.memo，这是一个高阶组件，它返回一个新的记忆组件。

如果它的 props 没有改变，memoized 组件将不会触发重新渲染。

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