React 中React.memo的作用，怎样利用它举行组件性能优化？

明白话React 中React.memo的作用，怎样利用它举行组件性能优化？

React.memo 是啥玩意儿

在 React 里，组件渲染是很频仍的事儿。每次父组件状态变了，子组件就大概会重新渲染，哪怕子组件的 props 压根儿没厘革。这就好比你去超市，只买了瓶饮料，收银员却把整个货架都重新整理一遍，纯属浪费时间和精神。而 React.memo 就是来办理这个标题的，它能让组件“记着”之前的渲染效果，要是 props 没厘革，就直接用之前的效果，不消重新渲染，如许能大大提升性能。
怎么用 React.memo

React.memo 是一个高阶组件，你把它套在你的组件外貌，它就会帮你比力前后两次的 props。要是一样，就不重新渲染组件。下面咱来看看详细代码：

1. // 导入 React 库，因为要用到 React.memo
2. import React from 'react';
4. // 定义一个简单的组件，这个组件接收一个 name 属性
5. const MyComponent = React.memo((props) => {
6.     // 打印日志，方便我们知道组件什么时候渲染了
7.     console.log('MyComponent 渲染了');
8.     // 返回一个简单的 JSX 元素，显示传入的 name 属性
9.     return <div>Hello, {props.name}!</div>;
10. });
12. // 定义一个父组件
13. const ParentComponent = () => {
14.     // 定义一个状态变量 count，初始值为 0
15.     const [count, setCount] = React.useState(0);
16.     // 定义一个函数，用于增加 count 的值
17.     const handleClick = () => {
18.         setCount(count + 1);
19.     };
21.     return (
22.         <div>
23.             {/* 显示 count 的值 */}
24.             <p>Count: {count}</p>
25.             {/* 点击按钮，调用 handleClick 函数增加 count 的值 */}
26.             <button onClick={handleClick}>增加计数</button>
27.             {/* 使用 MyComponent 组件，传入 name 属性 */}
28.             <MyComponent name="World" />
29.         </div>
30.     );
31. };
33. // 导出父组件，方便在其他地方使用
34. export default ParentComponent;

复制代码

代码表明

• MyComponent 组件：
  
  
  
  • 这是一个简朴的函数组件，吸收一个 name 属性。
    
  • 用 React.memo 把它包起来，如许当 MyComponent 的 props 没厘革时，就不会重新渲染。
    
  • 内里有个 console.log，每次渲染都会打印日志，方便我们观察。
    
  
  
• ParentComponent 组件：
  
  
  
  • 有个 count 状态变量，初始值是 0。
    
  • 有个按钮，点击后会调用 handleClick 函数，让 count 的值加 1。
    
  • 内里利用了 MyComponent 组件，传入 name 属性为 World。
    
  
  

利用场景

• 纯展示组件：如果一个组件只是根据传入的 props 来展示内容，没有自己的状态，也不做什么副作用利用，那就可以用 React.memo 包起来。好比上面的 MyComponent，它只根据 name 属性来表现内容。
  
• 频仍渲染的组件：要是一个组件在父组件每次渲染时都会跟着渲染，但它的 props 大部门时间都稳定，那就用 React.memo 优化一下。好比列表里的每个列表项组件。
  

注意事项

• React.memo 只比力 props 的浅条理厘革。要是 props 里有对象大概数组，而且这些对象或数组的引用变了，哪怕内里的值没变，组件也会重新渲染。
  
• 要是你必要自界说比力逻辑，可以给 React.memo 传入第二个参数，它是一个函数，用来比力前后两次的 props。
  

1. // 自定义比较函数
2. const areEqual = (prevProps, nextProps) => {
3.     // 这里可以写自定义的比较逻辑
4.     return prevProps.name === nextProps.name;
5. };
7. // 使用自定义比较函数的 MyComponent
8. const MyComponentWithCustomCompare = React.memo((props) => {
9.     console.log('MyComponentWithCustomCompare 渲染了');
10.     return <div>Hello, {props.name}!</div>;
11. }, areEqual);

复制代码

如许，你就可以根据自己的需求来控制组件是否重新渲染啦。