useMemo优化React Hooks程序性能（九）

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新以前）这个生命周期，也就是说咱们没有办法经过组件更新前条件来决定组件是否更新。并且在函数组件中，也再也不区分mount和update两个状态，这意味着函数组件的每一次调用都会执行内部的全部逻辑，就带来了很是大的性能损耗。useMemo和useCallback都是解决上述性能问题的，这节课先学习useMemo.

性能问题展现案例

先编写一下刚才所说的性能问题，创建两个组件,一个父组件一个子组件，组件上由两个按钮，一个是小红，一个是志玲，点击哪一个，那个就像咱们走来了。在/src文件夹下，新创建一个Example7的文件夹，在文件夹下创建一个Example7.js文件.而后先写第一个父组件。

import React , {useState,useMemo} from 'react';

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

父组件调用了子组件，子组件咱们输出两个姑娘的状态，显示在界面上。代码以下：

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

    const actionXiaohong = changeXiaohong(name)
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

而后再导出父组件，让index.js能够渲染。

export default Example7

这时候你会发如今浏览器中点击志玲按钮，小红对应的方法都会执行，结果虽然没变，可是每次都执行，这就是性能的损耗。目前只有子组件，业务逻辑也很是简单，若是是一个后台查询，这将产生严重的后果。因此这个问题必须解决。当咱们点击志玲按钮时，小红对应的changeXiaohong方法不能执行，只有在点击小红按钮时才能执行。

useMemo 优化性能

其实只要使用useMemo，而后给她传递第二个参数，参数匹配成功，才会执行。代码以下：

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

    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

这时在浏览器中点击一下志玲按钮，changeXiaohong就再也不执行了。也节省了性能的消耗。案例只是让你更好理解，你还要从程序自己看到优化的做用。好的程序员对本身写的程序都是会进行不断优化的，这种不必的性能浪费也是绝对不容许的，因此useMemo的使用在工做中仍是比较多的。但愿小伙伴们能够掌握。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html