P08:useMemo优化React Hooks程序性能

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。使用function的形式来声明组件,失去了shouldCompnentUpdate(在组件更新之前)这个生命周期,也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中,也不再区分mountupdate两个状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,就带来了非常大的性能损耗。useMemouseCallback都是解决上述性能问题的,本文先学习useMemo

import React, {useState} from 'react';

function Example7() {
    const [ahong,setAhong] = useState('阿红待客状态')
    const [yuanyuan,setYuanyuan] = useState('圆圆待客状态')
    return (
        <>
            <button onClick={()=>{setAhong(new Date().getTime())}}>阿红</button>
            <button onClick={()=>{setYuanyuan(new Date().getTime() + '圆圆向我们走来')}}>圆圆</button>
            <ChildComponent name={ahong}>{yuanyuan}</ChildComponent>
        </>
    )
}

父组件调用了子组件,子组件我们输出两个姑娘的状态,显示在界面上。代码如下:

function ChildComponent({name,children}){
    function changeAhong(name){
        console.log('她来了!阿红向我们走来了')
        return name + ',阿红向我们走来'
    }

    const actionAhong = changeAhong(name)
    return (
        <>
            <div>{actionAhong}</div>
            <div>{children}</div>
        </>
    )
}

然后再导出父组件,让index.js可以渲染。

export default Example7

GIF效果展示

useMemo优化React Hooks程序性能

这时候你会发现在浏览器中点击圆圆按钮,阿红对应的方法都会执行,结果虽然没变,但是每次都执行,这就是性能的损耗。目前只有子组件,业务逻辑也非常简单,如果是一个后台查询,这将产生严重的后果。所以这个问题必须解决。当我们点击圆圆按钮时,阿红对应的changeAhong方法不能执行,只有在点击阿红按钮时才能执行。

useMemo 优化性能

其实只要使用useMemo,然后给她传递第二个参数,参数匹配成功,才会执行。代码如下:

function ChildComponent({name,children}){
    function changeAhong(name){
        console.log('她来了!阿红向我们走来了')
        return name + ',阿红向我们走来'
    }

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

GIF效果预览

useMemo优化React Hooks程序性能

这时在浏览器中点击一下圆圆按钮,changeAhong就不再执行了。也节省了性能的消耗。案例只是让你更好理解,你还要从程序本身看到优化的作用。好的程序员对自己写的程序都是会进行不断优化的,这种没必要的性能浪费也是绝对不允许的,所以useMemo的使用在工作中还是比较多的。希望小伙伴们可以掌握。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P08:useMemo优化React Hooks程序性能

发表评论

提供最优质的资源集合

立即查看 了解详情