2.16 memo在props不变情况下跳过重新渲染

一、memo在props不变情况下跳过重新渲染

memo允许在props不变时跳过重新渲染组件，可以达到一些性能优化

默认情况下下，子组件会重新渲染：

import { useState } from 'react'

function Head() {
  return (
    <>
      <div>Head, {Math.random()}</div>
    </>
  )
}

function App() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <div>Default Template</div>
      <button onClick={handleClick}>按钮</button>
      <Head></Head>
    </>
  )
}

export default App

子组件重新渲染会有性能损耗

通过memo改造

import { memo, useState } from 'react'

const Head = memo(function Head() {
  return (
    <>
      <div>Head, {Math.random()}</div>
    </>
  )
})

function App() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <div>Default Template</div>
      <button onClick={handleClick}>按钮</button>
      <Head></Head>
    </>
  )
}

export default App

直接通过memo绑定，并赋予新名即可
如果向子组件传值，传的值改变，那么子组件就会重新渲染

memo的使用需要考虑实际情况，有性能问题时候可以加，如果没有性能问题，可以不加，是一个优化的点

上一页2.15 Reducer配合Context实现共享状态管理下一页2.17 useMemo对计算结果进行缓存

最后更新于2年前