React - React.memo

作用：允许组件在 Props 没有改变的情况下跳过渲染

注：React 组件渲染机制，只要父组件重新渲染，子组件也会重新渲染

1. 示例

import { memo, useState } from 'react'

// function Son() {
//   console.log('执行子组件渲染')
//   return <div>Son Component</div>
// }

// props 发生变化时才重新渲染子组件
const MemoSon = memo(function Son() {
  console.log('执行子组件渲染')
  return <div>Son Component</div>
})

function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      count: {count}
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <MemoSon />
    </div>
  )
}

export default App

2. props 的比较机制

在使用 memo 缓存组件后，React 会对每一个 prop 使用 Object.is 方法比较心值和旧值

• prop 是简单（基本）类型

  Object.is(1, 1) ---> true 无变化

• prop 是引用类型（对象/数组）

  Object.is([], []) ---> false 有变化（即：React 不关心内容，只关心引用是否发生变化）

import { memo, useMemo, useState } from 'react'

const MemoSon = memo(function Son({ count, list }) {
  console.log('执行子组件渲染')
  return <div>Son Component</div>
})

function App() {
  const [count, setCount] = useState(0)
  const index = 100
  const list = [1, 2, 3]

  // 保持引用稳定
  const memoList = useMemo(() => {
    return [1, 2, 3]
  }, [])
  return (
    <div className="App">
      count: {count}
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      {/* 子组件 prop 发生变化（count累加），执行重新渲染 */}
      {/* <MemoSon count={count} /> */}
      
      {/* 子组件 prop 无变化（传递的 count 是固定的），不执行重新渲染 */}
      {/* <MemoSon count={index} /> */}
      
      {/* count 累加变化时，父组件重新渲染，list 也会重新执行声明（即子组件 prop 参数的引用发生了变化，执行重新渲染） */}
      {/* <MemoSon list={list} /> */}
      
      {/* memo 保持引用稳定 */}
      <MemoSon list={memoList} />
    </div>
  )
}

export default App