React.memo基础使用

说明

React组件默认的渲染机制：只要父组件重新渲染，子组件就会重新渲染。

而React.memo允许组件在Props没有改变的情况下跳过渲染。

https://zh-hans.react.dev/reference/react/memo

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

返回值：memo 返回一个新的 React 组件。它的行为与提供给 memo 的组件相同，只是当它的父组件重新渲染时 React 不会总是重新渲染它，除非它的 props 发生了变化。

使用 memo 将组件包装起来，以获得该组件的一个 记忆化 版本。通常情况下，只要该组件的 props 没有改变，这个记忆化版本就不会在其父组件重新渲染时重新渲染。但 React 仍可能会重新渲染它：记忆化是一种性能优化，而非保证。

示例

演示不使用React.memo，默认渲染机制：父组件重新渲染，子组件也会被重新渲染

import { useState } from "react"

function Son() {
  console.log('子组件重新渲染了')
  return <div>this is son</div>
}

function App() {
  const [count, setCount] = useState(0)
  console.log('父组件重新渲染了')

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击自增count</button>
      <Son />
    </div >
  )
}

export default App

使用memo函数进行缓存

import { memo, useState } from "react"

// 使用memo函数进行缓存，只有props发生变化的时候，才会重新渲染
const MemoSon = memo(function Son() {
  console.log('子组件重新渲染了')
  return <div>this is son</div>
})


// function Son() {
//   console.log('子组件重新渲染了')
//   return <div>this is son</div>
// }

function App() {
  const [count, setCount] = useState(0)
  console.log('父组件重新渲染了')

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击自增count</button>
      <MemoSon />
    </div >
  )
}

export default App

初始渲染：

点击按钮，改变值，引起父组件的重新渲染，但此时子组件没有重新渲染：