​ 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

函数组件-性能优化（试了一下，react18好像没有这个问题）

当你想要避免函数组件 props 没有变化而产生的不必要更新时，就要用到 React.memo 了

初始状态，创建两个子组件（Child1, Child2）

Child1

export default function Child1({count}) {
  console.log('Child1, 组件被渲染了', count);
  return (
    <div>Child1=={count}</div>
  )
}

Child2

export default function Child2() {
  console.log('Child2, 组件被渲染了');
  return (
    <div>Child2</div>
  )
}

App

import { useState } from 'react';
import Child1 from './components/Child1';
import Child2 from './components/Child2';

export default function App() {

  const [count, setCount] = useState(0);

  // 单击按钮触发 计数器+1
  const add = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <Child1 count={count}></Child1>
      <Child2></Child2>
      <button onClick={add}>按钮+1</button>
    </div>
  )
}

初次加载

​编辑

可以看出，Child2组件没有使用父组件的count，也一直被重新渲染

React.memo基本使用

格式:

const MemoChild = React.memo(Child)

改造

Child2

import React from 'react'

function Child2() {
  console.log('Child2, 组件被渲染了');
  return (
    <div>Child2</div>
  )
}

export default React.memo(Child2);

效果实现

​编辑

手动控制比较过程

export default React.memo(Child2, function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
});

• 第二个参数：用来比较更新前后 props 的函数。
• 返回值：如果返回 true，表示记住（不重新渲染）该组件；如果返回 false，表示重新渲染该组件。

原理： 

通过对比检查更新前后 props 是否相同，来决定是否复用上一次的渲染结果

• 如果相同，复用上一次的渲染结果
• 如果不同，重新渲染组件

react函数组件性能优化-避免不必要的重新渲染

结论

当⽗组件重新渲染时： ⼦组件未使⽤ React.useMemo，不管⼦组件 props 是什么类型，⼦组件都会重复渲染；

⼦组件使⽤ React.useMemo，依赖项数组的值有改变时会造成⼦组件重复渲染； ​