React.memo - props比较机制

React.memo - props比较机制

在使用memo函数缓存组件之后，React会对每一个prop使用Object.is比较老值和新值。只有全部返回true的时候，才表示props没有变化，就会跳过渲染。

当prop是简单类型，比较的是新值和旧值，例如：

当prop是引用类型（对象、数组)，比较的是新值和旧值的引用，React只关心引用是否变化，例如：

示例

props是简单类型：当传递给子组件的props发生变化时

import { memo, useState } from "react"

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

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

  return (
    <div>
      <MemoSon count={count} />
      <button onClick={() => setCount(count + 1)}>点击改变count的值</button>
    </div >
  )
}

export default App

初始展示：

点击按钮，改变count的值，子组件也被重新渲染了：

props是简单类型：当传递给子组件的props没有发生变化时

import { memo, useState } from "react"

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

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

  const num = 100
  return (
    <div>
      <MemoSon count={num} />
      <button onClick={() => setCount(count + 1)}>点击改变count的值</button>
    </div >
  )
}

export default App

初始展示：

点击按钮改变count的值，但因为传递给子组件的props并没有变化，所以子组件不会重新渲染：

传递的props是引用类型：props发生变化，引发子组件重新渲染

import { memo, useState } from "react"

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

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

  // 注意：每次父组件重新渲染，App这个函数会重新执行，list会得到一个全新的引用。
  // 当引用发生变化的时候，就认为传递给子组件的props发生了变化，引发子组件的重新渲染
  const list = [1, 2, 3]
  return (
    <div>
      <MemoSon list={list} />
      <button onClick={() => setCount(count + 1)}>点击改变count的值</button>
    </div >
  )
}

export default App

初始展示：

点击按钮引起父组件重新渲染，子组件也重新渲染了：

传递的props是引用类型：props没有发生变化，子组件不会重新渲染

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

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

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

  const list = useMemo(() => {
    return [1, 2, 3]
    // 传递给useMemo的第二个参数是一个空数组，表示空依赖，表示useMemo第一个参数代表的函数只有在组件渲染完毕后执行一次
  }, [])

  return (
    <div>
      <MemoSon list={list} />
      <button onClick={() => setCount(count + 1)}>点击改变count的值</button>
    </div >
  )
}

export default App

初始展示：

点击按钮，引发父组件重新渲染，但因为传递给子组件的props引用并没有发生变化，所以子组件不会重新渲染：