React中常用的hook函数(二)——useMemo和useCallback

React中常用的hook函数(一)------useState和useEffect_usestate useeffect-CSDN博客https://blog.csdn.net/Mrs_Lupin/article/details/142905749?spm=1001.2014.3001.5502

一、useMemo

1.作用:

在组件每次重新渲染的时候缓存计算的结果,一般用于消耗非常大的计算,比如n特别大时计算斐波那契数列

2.需求:

count1和count2状态都位于组件内部,无论哪个改变都会引发组件重新渲染,造成浪费。我们想只让count1发生变化时,fn才会重新执行,达到一个缓存的目的

3.语法:

javascript 复制代码
useMemo(() => {
    //根据count1返回计算的结果
}, [count1])

4.示例

javascript 复制代码
import { useMemo, useState } from "react"

// 计算斐波那契数列之和
function fib (n) {
  console.log('计算函数执行了')
  if (n < 3)
    return 1
  return fib(n - 2) + fib(n - 1)
}

function App () {
  const [count1, setCount1] = useState(0)


  const result = useMemo(() => {
    // 返回计算得到的结果
    return fib(count1)
  }, [count1])

  // const result = fib(count1)

  const [count2, setCount2] = useState(0)
  console.log('组件重新渲染了')
  return (
    <div className="App">
      this is app
      <button onClick={() => setCount1(count1 + 1)}>change count1: {count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>change count2: {count2}</button>
      {result}
    </div>
  )
}

export default App

二、React.memo

1.React组件默认的渲染机制:

只要父组件重新渲染子组件就会重新渲染

javascript 复制代码
import { memo, useState } from "react"


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

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

export default App

2.作用:

允许组件在Props没有改变的情况下跳过渲染,缓存组件

3.基本语法:

经过memo函数包裹生成的缓存组件作为子组件,只有在props发生变化时才会重新渲染

4.示例:

javascript 复制代码
import { memo, useState } from "react"

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

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

export default App

拓展:props比较机制说明

在使用memo缓存组件之后,React会对每一个prop 使用Object.is比较新值和老值,返回true,表示没有变化

prop为简单类型,比较的是数值;prop为引用类型,比较的是新值和旧值的引用是否相等,即便在组件内两次声明的数组或者对象值一模一样,但是组件重新渲染时又会重新生成新的引用

但是可以保证这个引用稳定 --使用useMemo缓存这个数据

javascript 复制代码
const list = useMemo(() => {
    return [1, 2, 3]
},[])

三、useCallback

1.作用:

在组件多次重新渲染的时候缓存函数

2.背景:

父子通信时,通过prop传递函数,useCallback使得这个函数稳定,不会重新渲染子组件

3.基本用法:

javascript 复制代码
const changeHandler = useCallback((value) => console.log(value), [])

4.示例:

javascript 复制代码
import { memo, useCallback, useState } from "react"

const Input = memo(function Input ({ onChange }) {
  console.log('子组件重新渲染了')
  return <input type="text" onChange={(e) => onChange(e.target.value)} />
})

function App () {
  // 传给子组件的函数
  const changeHandler = useCallback((value) => console.log(value), [])
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      {/* 把函数作为prop传给子组件 */}
      <Input onChange={changeHandler} />
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default App
相关推荐
旺仔小拳头..5 分钟前
HTML的布局—— DIV 与 SPAN
前端·html
T___T5 分钟前
从原生 CSS 到 Stylus:用弹性布局实现交互式图片面板
前端·css
Zyx20075 分钟前
Stylus 进阶:从“能用”到“精通”,打造企业级 CSS 架构(下篇)
前端·css
黄毛火烧雪下7 分钟前
Angular 入门项目
前端·angular
用户4099322502128 分钟前
快速入门Vue3,插值、动态绑定和避坑技巧你都搞懂了吗?
前端·ai编程·trae
CondorHero9 分钟前
Environment 源码解读
前端
残冬醉离殇11 分钟前
别再傻傻分不清!从axios、ElementPlus深入理解SDK与API的区别
前端
CodeSheep20 分钟前
稚晖君官宣,全球首个0代码机器人创作平台来了!
前端·后端·程序员
向上的车轮23 分钟前
Actix Web 入门与实战
前端·rust·actix web
Mintopia1 小时前
🧬 生物识别 + AIGC:Web端个性化服务的技术协同路径
前端·javascript·aigc