hooks useMemo

import React, { useState ,useMemo} from 'react';//useMemo解决反复执行问题

useMemo从react引入。{ useMemo}的意思就是从react文件中寻找到与useMemo名字相同的函数。

useMemo有两个参数。
useMemo（fuc(name)，[name]）//第一个参数的name与第二个参数的name进行比较，当name不一样的时候才执行。

---

实例

function Example7(){
    const [xiaohong,setXiaohong] = useState('小红在待客状态')
    const [zhiling,setZhiling] = useState('志玲在待客状态')
    return(
        <div>
            <button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button>
            <button onClick={()=>{setZhiling(new Date().getTime()+'志玲向我们走来')}}>志玲</button>
            <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
        </div>
    )
}

useState 表示的是state的初始值。
**onClick={()=>{setXiaohong(new Date().getTime())}**表示的是当点击button的时候，xiaohong的值比九变成了时间戳。

---

组件

function ChildComponent({name,children}){
    function changeXiaohong(){
        console.log(children)
        console.log('她来了,她来了，小红向我们走来了')
        return name+',小红向我们走来了'
    }

    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name])//name发生变化才执行

    return(
        <div>
            <div>
                {actionXiaohong}
            </div>
            <div>
                {children}
            </div>
        </div>
    )
}

这串代码就是Examp7中的ChildComponent组件。
在父组件中，name通过<ChildComponent name={xiaohong} 进行传值,
而第二个参数children是固定写法，通过{zhiling}进行传值。

actionXiaohong通过useMemo就完成了只有点击小红才能执行changeXiaohong