react-useMemo/useCallback/memo使用

react提供useMemo/useCallback/memo方法，提高页面刷新效率。若组件依赖的属性没有发送变化，组件可以不刷新。以下提供两个场景的具体使用

单组件内使用

使用语法

import React, { useMemo } from 'react'
useMemo(() => {}, [] ) 

• 1.useMemo第一个参数是函数，第二个参数是数组
• 2.如果第二个参数不传递，与useEffect类似，意味着每次都会执行第一个函数参数，则使用useMem就毫无意义
• 3.如果第二个参数传的是空数组[]， 与useEffect类似，只执行一次,类似类组件componentDidmount
• 4.useMemo与useEffect有不一样的一点就是调用时机 —— useEffect执行的是副作用，所以一定是在渲染之后运行的；而useMemo是需要有返回值的，返回值会参与渲染，所以useMemo是是在渲染期间完成的。
• 5.useMemo，定义了一段函数逻辑，根据第二个参数判断是否执行第一个函数执行

useMemo

case1 （不设置第二个参数，无优化效果）

• useMemo第二个参数不设置
• 代码表现：每次点击点击+1，控制台打印double，同时标签Double每次刷新
• 代码解析：useMemo第二个参数不设置，页面首次加载和页面更新，都会重新加载<div>Double is :{double}</div>

import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'
// 函数组件，当前组件中useMemo的使用
function App() {
    const [count, setCount] = useState(0)
    const double = useMemo(()=>{
        console.log('double')
        return count * 2
    })//关注点
    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>点击+1
            </button>
            <div>Count is :{count}</div>
            <div>Double is :{double}</div>
        </div>
    )
}

case2 （设置第二个参数为[]，首次加载更新）

• useMemo第二个参数设置为[]，这组件只会在页面首次加载更新，类似类组件的componentDidMount
• 代码表现：页面首次加载，控制台打印double；每次点击点击+1，控制台打印无打印日志，同时标签Double始终为0
• 代码解析：useMemo第二个参数设置[]，<div>Double is :{double}</div>只有在首次页面加载，即double变化了，也不会改变标签的

import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'

// 函数组件，当前组件中useMemo的使用
function App() {
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        console.log('double')
        return count * 2
    },[])  //关注点

    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>点击+1
            </button>
            <div>Count is :{count}</div>
            <div>Double is :{double}</div>
        </div>
    )
}

case3 （设置第二个参数为[count===2]）

• useMemo第二个参数设置为[count===2]
• 代码表现：页面首次加载，控制台打印double；点击点击+1，当count=2，count=3的时候控制台打印double，同时标签<div>Double is :{double}</div>更新两次，分别为Double is :4和Double is :6
• 代码解析：useMemo第二个参数设置[count===2]，表示当count===2的时候才会更新组件，count从1，2，3对应count===2变化为false, true, false，因此只有2次刷新

import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'

// 函数组件，当前组件中useMemo的使用
function App() {
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        console.log('double')
        return count * 2
    },[count===2])  //关注点

    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>点击+1
            </button>
            <div>Count is :{count}</div>
            <div>Double is :{double}</div>
        </div>
    )
}

父子组件内使用

目标：

子组件的依赖属性更新，才会重新加载子组件

操作：

• 1.子组件用memo声明，
• 2.子组件对父组件依赖的所有属性用useCallback或者useMemo声明

子组件没用memo声明

程序响应：

• 1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
• 2.每次count变化，子组件都会重新渲染（控制台打印日志counter）

代码如下

function Counter(props) {
    console.log('counter')
    return (
        <div>
            double is : {props.counter}
        </div>
    )
}
function App (){
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        return count * 2
    }, [count === 2])

    return (
        <div>
            <button onClick={()=>{setCount(count + 1)}}>点击+1</button>
            <div>count is : {count}</div>
            <Counter counter = {double}></Counter>
        </div>
    )
}

子组件用memo声明

程序响应：

• 1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
• 2.当count为2，3的时候，子组件会重新渲染（控制台打印日志counter）

代码如下

const Counter = memo(function Counter(props) {
    console.log('counter')
    return (
        <div>
            double is : {props.counter}
        </div>
    )
})

function App (){
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        return count * 2
    }, [count === 2])

    return (
        <div>
            <button onClick={()=>{setCount(count + 1)}}>点击+1</button>
            <div>count is : {count}</div>
            <Counter counter = {double}></Counter>
        </div>
    )
}

子组件用部分属性useMemo声明

程序响应：

• 1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
• 2.每次count变化，子组件都会重新渲染（控制台打印日志counter）,原因是btnClick是箭头函数定义的，react页面更新都会重新渲染子组件

代码

//函数组件，父组件，子组件
const Counter = memo(function Counter(props) {
    console.log('counter')
    return (
        <div>
            double is : {props.counter}
        </div>
    )
})

function App (){
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        return count * 2
    }, [count === 2])

    const btnClick = ()=>{
        console.log('click')
    }

    return (
        <div>
            <button onClick={()=>{setCount(count + 1)}}>点击+1</button>
            <div>count is : {count}</div>
            <Counter counter = {double} onClick={btnClick}></Counter>
        </div>
    )
}

子组件用全部属性useMemo/useCallback声明

程序响应：

• 1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
• 2.当count为2，3的时候，子组件会重新渲染（控制台打印日志counter）
• 1. const btnClick = useCallback(()=>{console.log('click')}, [])， 关注useCallback第二个参数，
     ** a.当第二个参数不设置，则每次count变化，子组件都会重新加载，即使counter = {double}不发生变化，因为btnClick是首次加载和更新都会重新加载，导致子组件也会重新加载
     ** b.当第二个参数为[]出现2的现象，原因是子组件的double发生变化
     ** c.当第二个参数为[double]出现2的现象，原因是double发生比变化

代码

//函数组件，父组件，子组件
const Counter = memo(function Counter(props) {
    console.log('counter')
    return (
        <div>
            double is : {props.counter}
        </div>
    )
})

function App (){
    const [count, setCount] = useState(0)

    const double = useMemo(()=>{
        return count * 2
    }, [count === 2])

    const btnClick = useCallback(()=>{
        console.log('click')
    }, [])

    return (
        <div>
            <button onClick={()=>{setCount(count + 1)}}>点击+1</button>
            <div>count is : {count}</div>
            <Counter counter = {double} onClick={btnClick}></Counter>
        </div>
    )
}