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
相关推荐
涵信8 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安9 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板14 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩15 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真21 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记