react 之 react.memo

React.memo

作用:允许组件在props没有改变的情况下跳过重新渲染

组件默认的渲染机制

默认机制:顶层组件发生重新渲染,这个组件树的子级组件都会被重新渲染

jsx 复制代码
// memo
// 作用:允许组件在props没有改变的情况下跳过重新渲染

import { useState } from 'react'

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

function App() {
  const [forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
  
      <Son />
      <button onClick={() => forceUpdate(Math.random())}>update</button>

  )
}

export default App

使用React.memo优化

缓存机制:只有props发生变化时才重新渲染

下面的子组件通过 memo 进行包裹之后,返回一个新的组件MemoSon, 只有传给MemoSon的props参数发生变化时才会重新渲染

jsx 复制代码
import React, { useState } from 'react'

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

function App() {
  const [forceUpdate] = useState()
  console.log('父组件重新渲染了')
  return (
      <MemoSon />
      <button onClick={() => forceUpdate(Math.random())}>update</button>
  )
}

export default App

props变化重新渲染

jsx 复制代码
import React, { useState } from 'react'

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

function App() {
  console.log('父组件重新渲染了')

  const [count, setCount] = useState(0)
  return (
      <MemoSon count={count} />
      <button onClick={() => setCount(count + 1)}>+{count}</button>
  )
}

export default App

props的比较机制

  1. 传递一个简单类型的prop prop变化时组件重新渲染

  2. 传递一个引用类型的prop 比较的是新值和旧值的引用是否相等 当父组件的函数重新执行时,实际上形成的是新的数组引用

对于props的比较,进行的是'浅比较',底层使用 Object.is 进行比较,针对于对象数据类型,只会对比俩次的引用是否相等,如果不相等就会重新渲染,React并不关心对象中的具体属性

jsx 复制代码
import React, { useState } from 'react'

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

function App() {
  // const [count, setCount] = useState(0)
  const [list, setList] = useState([1, 2, 3])
  return (
    <>
      <MemoSon list={list} />
      <button onClick={() => setList([1, 2, 3])}>
        {JSON.stringify(list)}
      </button>
    </>
  )
}

export default App

说明:虽然俩次的list状态都是 [1,2,3] , 但是因为组件App俩次渲染生成了不同的对象引用list,所以传给MemoSon组件的props视为不同,子组件就会发生重新渲染

保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

javascript 复制代码
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)
  const list = useMemo(() => {
    return [1, 2, 3]
  }, [])

  return (
    <div className="App">
      <MemoSon list={list} />
      <button onClick={() => setCount(count + 1)}>change Count</button>
    </div>
  )
}
export default App
相关推荐
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip6 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel6 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休7 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪7 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do7 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选7 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选7 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼7 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——7 小时前
前端登录鉴权详解
前端·javascript