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
相关推荐
BestStarLi几秒前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲2 分钟前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter
今天头发还在吗8 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥16 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong32 分钟前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王35 分钟前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾44 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码1 小时前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js