首页 > 其他分享 >React 函数式组件怎样进行优化

React 函数式组件怎样进行优化

时间:2022-09-25 20:01:13浏览次数:67  
标签:const 函数 渲染 Child React props 组件

前言

目的

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

面向读者

有过 React 函数式组件的实践,并且对 hooks 有过实践,对 useState、useCallback、useMemo API 至少看过文档,如果你有过对类组件的性能优化经历,那么这篇文章会让你有种熟悉的感觉。

React 性能优化思路

我觉得React 性能优化的理念的主要方向就是这两个:

  1. 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单的可以理解为 diff),如果不 render,就不会 reconciliation。

  2. 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。

在使用类组件的时候,使用的 React 优化 API 主要是:shouldComponentUpdatePureComponent,这两个 API 所提供的解决思路都是为了减少重新 render 的次数,主要是减少父组件更新而子组件也更新的情况,虽然也可以在 state 更新的时候阻止当前组件渲染,如果要这么做的话,证明你这个属性不适合作为 state,而应该作为静态属性或者放在 class 外面作为一个简单的变量 。

但是在函数式组件里面没有声明周期也没有类,那如何来做性能优化呢?

React实战视频讲解:进入学习

React.memo

首先要介绍的就是 React.memo,这个 API 可以说是对标类组件里面的 PureComponent,这是可以减少重新 render 的次数的。

可能产生性能问题的例子

举个

标签:const,函数,渲染,Child,React,props,组件
From: https://www.cnblogs.com/xiaofeng123aa/p/16728649.html

相关文章

  • antd组件的<Upload>组件
    使用<Upload>组件上传多个文件时需要做一定的个数限制。如果直接  if(fileList?.length>100){message.error('制上传100条')}那么超过100条的每条都会有提示,不只是提示一......
  • 详细解读 React useCallback & useMemo
    前言阅读本文章需要对Reacthooks中useState和useEffect有基础的了解。我的这篇文章内有大致介绍在React项目中全量使用Hooks。useCallbackuseCallback的作......
  • 组件
    1.view同div使用2.swiper滑块视图容器里面只能嵌套swiper-item组件(宽高自动设置为100%),再嵌套image组件即可常用属性<swiperindicator-dots="true"indicator-act......
  • C/C++ 关于默认构造函数
    前言:在C++中,对于一个类,C++的编译器都会为这个类提供四个默认函数,分别是:A()//默认构造函数~A()//默认析构函数A(constA&)//默认拷贝构造函数A&operator=(const......
  • 函数式接口作为方法的参数案例和函数式接口作为方法的返回值类型案例
    函数式接口作为方法的参数案例:/*假如java.lang.Runnable接口就是一个函数式接口假设有一个startThread方法使用该接口作为参数,那么参数就可以使用Lambda进行传......
  • 封装加载动画组件,利用slot标签与vuex实现
     实现效果: 加载时:  加载完成时;   实现代码:通过vuex传入一个布尔值loading控制加载动画显示与否,动画关闭时,通过slot标签显示本组件中包含的其他内容组......
  • js 内置函数Date
    从深入潜JavaScript日期对象方法描述*空执行Date()返回当日的日期和时间(字符串)。getDate()orsetDate()get返回月中的第几天(1-31),set设置对象当月天。......
  • react-native 判断传入的日期是否是昨天
    constisYesterday=(theDate='2022-1-110:12:00')=>{theDate=newDate(theDate)vardate=(newDate());//当前时间vartoday=newDate(date.ge......
  • C语言第18天,字符串处理函数
    字符串处理函数与printf不同,这些函数不在之前熟悉的头文件stdio.h中。而是在字符串专用的头文件string.h中。1.获取字符串长度strlenstrlen函数可以获取字符数组中的字......
  • 封装axios函数记录
    基于axios进行二次封装统一配置,便于管理下载axiosyarnaddaxios创建utils/request.js//基于axios封装的请求模块importajaxfrom'axios'//新建一......