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
相关推荐
慧一居士24 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead26 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js