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
相关推荐
m0_749317524 分钟前
Maven学习
java·前端·后端·学习·maven
Coderfuu19 分钟前
Java Web 3 Axios & Vue组件库
前端·javascript·vue.js
闭上眼让寒冷退却23 分钟前
axios笔记
前端·笔记
小C好好干饭24 分钟前
Vue网页屏保
前端·javascript·vue.js
叶浩成52026 分钟前
draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理
前端·javascript·vue.js
刘大浪29 分钟前
vue npm install出现问题
前端·vue.js·npm
繁依Fanyi30 分钟前
打造一个有点好看的 uniapp 网络测速软件
前端
素质白嫖怪33 分钟前
element Plus中 el-table表头宽度自适应,不换行
前端·javascript·vue.js
嘿,小苹果42 分钟前
Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件
前端·3d·css3
guokanglun1 小时前
css实现圆周运动效果
前端·css