当前位置: 首页 > 知识库问答 >
问题:

反应(性能):如何防止每次状态更改时出现不必要的渲染?[副本]

岳玉书
2023-03-14

这个问题严重影响了我的表现。在每个州的变化,我的孩子的重新渲染。有什么办法可以摆脱这个吗?我如何防止我的子组件不受这种类型的重新呈现的影响。请帮忙。


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






共有2个答案

夏侯元忠
2023-03-14

为避免重新渲染,应在组件内容组件中使用React.memo,如下所示:

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

这样,组件将粗略地比较道具,仅在属性更改时再次渲染,而在本例中不会。

马德宇
2023-03-14

使用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

 类似资料:
  • 有一个案例我很困惑。 我有一个对象redux状态:{show:true,creative:{name:'a',tags:[t1,t2,t3]}。此对象已通过“react redux”的“connect”功能映射到道具。 当我改变属性“显示”或“creative.name”时,它确实会触发重新渲染。但是如果我将t0追加到"creative.tags",它就不会运行re-渲染。 我必须分配一个新变量来

  • 我希望每次只呈现数组中的三个元素。 每次我将单击em来更改数字。 例如:在屏幕上:123,我点击了在按钮,会出现456和以上。 MyCode:

  • 我正在实现一个kiosk模式应用程序,我已经成功地使应用程序全屏显示,在4.3之后没有状态栏出现,但在4.3和4.4中无法隐藏状态栏,因为当我们在屏幕顶部向下滑动时,状态栏会出现。 我已经试着在 在清单中指定全屏主题 设置窗口标志ie setFlags setSystemUi可视性 可能重复,但未找到具体解决方案 永久隐藏Android状态栏 最后的事情我想要的是,如何隐藏状态栏永久在一个活动??

  • 问题内容: 保持不变,尽管我在函数中调度了一个动作: 输出为NO_AUTH(的初始值) 减速器: 知道为什么吗? 问题答案: 您当前正在直接在未映射到的componentDidMount内部调度: 这应该做的工作: 现在,这将获得authState:

  • 问题内容: 我有一个这样的状态,我正在设置和标记如下: 我有一个列表,其中包含状态为类的项目: 在这里,如何更改特定div的类名? 问题答案: 以下是我相信您正在尝试做的一个功能齐全的示例(带有功能性摘录)。 根据您的问题,您似乎正在为所有元素修改1属性。这就是为什么当您单击一个时,它们全部都被更改了。 尤其要注意,状态跟踪 哪个 元素处于活动状态的索引。当被点击时,它告诉它的索引,更新,随后相应

  • 问题内容: 我的代码有效,但是我有一个最佳实践问题:状态中有一组对象,并且用户交互一次将更改一个对象的值。 据我所知,我不应该直接更改状态,而是应该始终使用。如果我想不惜一切代价避免这种情况,我将通过迭代深度克隆数组,然后更改克隆。然后将状态设置为克隆。我认为避免改变以后会改变的状态只是降低了我的表现。 详细版本: this.state.data是对象数组。它代表论坛中的主题列表,并且收藏夹按钮将