react -hook-useMemo防止不必要的的函数调用

useMemo是缓存值的,useMemo是防止不必要的的函数调用。

父组件或兄弟组件触发更新后，会按照父组件、子组件的顺序重新渲染，并且即使子组件本身没有发生任何变化，也会重复触发更新。

//父组件：
import { useState } from "react";
import SonFn from "./SonFn";

export default () => {
    console.log("父组件");
    const [name, setName] = useState('张三疯')
    const [age, setAge] = useState(12)
    return (
        <>
            <h1>useMemo</h1>
            <input type="button" 
                   value="修改name"
                   onClick={()=>setName(name+"1")} />
            <input type="button" 
                   value="修改age"
                   onClick={()=>setAge(age+1)} />
            <hr/>
            <SonFn name={name} age={age}  />
        </>
    )
}
//子组件：
import React,{memo,useMemo} from 'react'

const SonFn = ({name,age})=>{
    console.log("子组件");

    function isAdult(age1){
        return age1>=18?"已成年":"未成年";
    }

    //下面这句话就是我说的：  写在函数式组件里的 “函数调用代码” 。
    // 只要函数式组件重新渲染了，那么isAdult函数就会被调用一次。即使只是改了name的值。
    // let adultStr = isAdult(age);
    
    //现在，加上useMemo后，表示只有age发生变化，才调用isAdult函数。
    let adultStr = useMemo(()=>{
        return isAdult(age);
    },[age]);

    return (
        <div>
            <h5>子组件(函数式组件)</h5>
            <p>姓名：{name}</p>
            <p>年龄：{age}</p>
            <p>是否成年:{adultStr}</p>
        </div>
    )
}

export default memo(SonFn);

总结：

　　1、“万恶之源” ：函数式组件每次重新渲染时，都会把函数体里的所有代码执行一遍。

　　2、useMemo 解决的是 防止函数式组件里的 “调用函数的代码” 被多次被执行。既就是：useMemo 是保证函数式组件重新渲染时，组件里的“函数调用代码” 的执行时可控的。