[2

介绍

反应应用程序经常处理大型数据集和复杂的组件，在这种情况下，不必要的重新订阅可能会对性能产生重大影响。为了解决这个问题，React提供了React.Memo-一种简单而强大的工具，可优化组件并减少渲染时间。在本指南中，我们将探讨React Memo的工作原理，为什么有用以及如何逐步实施。

什么是反应备忘录？

为什么反应备忘录？

在React中，每当其父零件重新渲染时，组件重新渲染。如果组件的输出不取决于其父母的变化，这可能会导致效率低下。例如，在具有许多组件的复杂UI中，您可能会看到过多的重新租赁，可能会看到滞后。使用React Memo可以通过在必要时仅更新组件来优化此功能。

---

问题反应备忘录解决

1。不必要的重新租赁

当父组件重新呈现时，其子零件也重新渲染。这可能会导致性能瓶颈，尤其是当组件显示静态数据或依靠不变的道具时。

2。复杂的UIS中的Laggy或缓慢的性能

具有深嵌套组件的应用程序可能会由于累积重新租赁而面临缓慢的性能。通过React Memo的备忘录有助于防止重新租赁不需要更新的组件，从而增强应用程序的响应能力。

---

React Memo的工作方式：逐步示例

让我们仔细研究React Memo的基本实现。我们将从一个简单的组件开始，该组件不使用备忘录，并查看添加React Memo如何有所作为。

步骤1：设置一个没有React Memo的简单计数器组件

导入react，{usestate}来自'react'; 功能计数器（{count}）{ console.log（“重新渲染的“计数器组件”）; 返回

计数：{count}

; } 功能应用程序（）{ const [count，setCount] = usestate（0）; const [text，setText] = usestate（''）; 返回 （ ）； } 导出默认应用；

解释

在此示例中，每当您在输入字段中输入时，计数值值保持不变，即使计数器组件重新呈现。这是一个不必要的重新渲染，我们可以通过React Memo预防。

---

步骤2：用React Memo进行优化

现在，让我们用react.memo将计数器组件包裹起来。

导入react，{usestate}来自'react'; const counter = react.memo（函数计数器（{count}）{ console.log（“重新渲染的“计数器组件”）; 返回

计数：{count}

; }）; 功能应用程序（）{ const [count，setCount] = usestate（0）; const [text，setText] = usestate（''）; 返回 （ ）； } 导出默认应用；

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

与react.memo，计数器组件仅在其计数prop更改时重新呈现。现在，在输入字段中输入不再触发计数器的重新渲染，可以显着优化性能。

React Memo In Action：一种带有列表的实用场景

让我们进入一个更复杂的示例，以查看React Memo的真正好处。假设我们在每个项目旁边有一个带有“喜欢”按钮的项目列表。我们将演示React Memo在喜欢单个项目时如何防止过多的重新订阅者。

步骤1：在没有备忘录的情况下创建列表组件

导入react，{usestate}来自'react'; 功能项目（{item，on Like}）{ console.log（`渲染$ {item.name}`）; 返回 （ ）； } 函数itemList（）{ const [项目，setItems] = usestate（[ {id：1，name：'item 1'，喜欢：0}， {id：2，名称：'item 2'，喜欢：0}， {id：3，名称：'项目3'，喜欢：0}， ）; const handlelike =（id）=> { setItems（（previtems）=> previtems.map（（item）=> item.id === id？ {...项目，喜欢：item.likes 1}：项目 ） ）； }; 返回 （ ）； } 导出默认项目列表;

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

问题

在上述代码中，当您喜欢一个项目时，即使只有一个项目的喜欢变化，所有项目也会重新渲染。

步骤2：用React Memo优化项目组件

---

结果

现在，只有您单击的项目才能重新渲染，使UI更快，更有效。

何时使用React Memo？

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

静态组件

：诸如标题或页脚等不经常更改的组件。

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

：仅取决于呈现的组件。

组件的大列表

：列出了许多需要避免不必要的重新租赁的项目。

---

潜在的陷阱和最佳实践

浅比较
1. 性能监视：使用React DevTools识别哪些组件实际上从备忘录中受益。过度使用React Memo可以通过可忽略的性能提高导致代码复杂性。
2. 常见问题（常见问题解答）
问题1：反应备忘录与Usememo和Usecallback有何不同？
react memo

根据道具优化组件重新渲染。

---

在组件中caches计算值。

usecallback

1. Q2：我可以将React Memo与类组件一起使用吗？ 否，React Memo仅适用于功能组件。但是，对于类组件，可以使用Purecomponent实现类似的行为。

2. 结论

   React Memo是减少不必要的重新订阅并提高React应用程序性能的有价值工具。通过在纯功能组件或静态UI元素上有选择地使用它，您可以在不复杂的结构中优化React应用程序。遵循以下步骤，尝试示例，并继续进行试验，以找到您项目的最佳回忆策略！