React函数式组件的性能优化思路详解

更新时间：2021年04月25日 09:24:43 作者：fozero

这篇文章主要介绍了React函数式组件的性能优化思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

优化思路

主要优化的方向有2个：

减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。
减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。

在使用类组件的时候，使用的 React 优化 API 主要是：shouldComponentUpdate和 PureComponent

那么在函数式组件中，我们怎么做性能优化？主要用到下面几个方法去优化

React.memo
useCallback
useMemo

React.memo

看个例子：

我们在父组件中放一个按钮用于修改子标题，并引入Child子组件

可以看到，第一次进来子组件打印了console.log('我是子组件')

当点击修改子标题，Child子组件也打印了，造成了不必要的重复渲染次数

//父组件
import {useState} from 'react'

import Child from "./Child";
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子标题')
    const updateSubTitle = ()=>{
      setSubTitle('修改子标题')
    }
    return (
      <div>
        <div>函数式组件性能优化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子标题</button>
        <Child/>
      </div>
    );
  }
  
  export default Index;


//子组件Child.js
const Child = ()=>{
    console.log('我是子组件')
    return (
        <div>我是子组件</div>
    )
}
export default Child

优化一下，使用React.memo包裹子组件

import React from "react";

const Child = ()=>{
    console.log('我是子组件')
    return (
        <div>我是子组件</div>
    )
}
export default React.memo(Child)

再观察一下，发现Child子组件没有重复渲染了

useCallback

这里我们再改造一下，给Child子组件添加一个onclick事件，然后点击修改子标题按钮，发现我们的Child子组件又重新渲染了，这里主要是因为修改子标题的时候handlerClick函数重新渲染变化，造成子组件重新渲染

// 父组件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子标题')
    const updateSubTitle = ()=>{
      setSubTitle('修改子标题')
    }
    const handlerClick = ()=>{
      console.log('子组件点击')
    }
    return (
      <div>
        <div>函数式组件性能优化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子标题</button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

// Child子组件
const Child = (props)=>{
    console.log('我是子组件')
    return (
        <div>
            <div>我是子组件</div>
            <button onClick={props.onClick}>子组件按钮</button>
        </div>
    )
}
export default React.memo(Child)

优化一下，使用useCallback包裹处理子组件的handlerClick函数，再次点击updateSubTitle修改子标题，发现Child子组件没有重新再渲染

// 父组件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子标题')
    const updateSubTitle = ()=>{
      setSubTitle('修改子标题')
    }
    const handlerClick = useCallback(()=>{
      console.log('子组件点击')
    },[])

    return (
      <div>
        <div>函数式组件性能优化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子标题</button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }
  
  export default Index;

这里关于useCallback的用法

const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

把函数以及依赖项作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，这个 memoizedCallback 只有在依赖项有变化的时候才会更新。

useMemo

useMemo用于计算结果缓存

我们先看个例子，在之前基础上添加一个calcCount计算函数，然后点击updateSubTitle更新子标题，发现calcCount重新计算了，也就是每次渲染都会造成重复计算，如果是计算量比较大的情况下，会极大的影响性能

// 父组件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子标题')
    const updateSubTitle = ()=>{
      setSubTitle('修改子标题')
    }
    const handlerClick = useCallback(()=>{
      console.log('子组件点击')
    },[])

    const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = calcCount()

    return (
      <div>
        <div>函数式组件性能优化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子标题</button>
        <div>count:{count}</div>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

优化一下，使用useMemo缓存计算结果,我们再次点击updateSubTitle修改子标题按钮，可以发现calcCount函数不再重复计算

 const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = useMemo(calcCount,[])

最后，需要注意的是不能盲目的使用useMemo，要根据具体的场景，比如对于一个数据计算量比较大，那么使用是比较适用的，而对于普通的一些值得计算，可以不使用，因为本身useMemo也是会消耗一些性能，盲目使用反而会适得其反

参考阅读

https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA

http://www.ptbird.cn/react-hook-useMemo-purerender.html

到此这篇关于React函数式组件的性能优化的文章就介绍到这了,更多相关React性能优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

一文详解React中Hook的作用和用处
Hook是一种函数，它可以让你在函数组件中“挂钩”到React状态和生命周期等特性，这篇文章主要和大家介绍了React中Hook的作用和用处，希望对大家有所帮助
2023-05-05
react-intl实现React国际化多语言的方法
这篇文章主要介绍了react-intl实现React国际化多语言的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
如何强制刷新react hooks组件
这篇文章主要介绍了如何强制刷新react hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
React组件性能提升实现方法详解
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下
2023-03-03
react.js 父子组件数据绑定实时通讯的示例代码
本篇文章主要介绍了react.js 父子组件数据绑定实时通讯的示例代码，
2017-09-09
React Hooks常用钩子及基本原理解读
这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React项目中不需要jQuery原因分析
在Web开发的早期,jQuery是一个革命性的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax请求等任务,React的出现,jQuery在新项目中的必要性开始受到质疑,本文将探讨为什么在React应用中不需要jQuery,感兴趣的朋友可以参考下
2024-02-02
React组件通信实现流程详解
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
2022-12-12
React 组件间的通信示例
这篇文章主要介绍了React 组件间的通信示例，主要通信划分为三种，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
React Native按钮Touchable系列组件使用教程示例
这篇文章主要为大家介绍了React Native按钮Touchable系列组件使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11