关于react hooks的性能优化
目的
只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。
面向读者
有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇文章会让你有种熟悉的感觉。
React 性能优化思路
我觉得 React 性能优化的理念的主要方向就是这两个：
减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。
减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。
在使用类组件的时候，使用的 React 优化 API 主要是：shouldComponentUpdate和 PureComponent，这两个 API 所提供的解决思路都是为了减少重新 render 的次数，主要是减少父组件更新而子组件也更新的情况，虽然也可以在 state 更新的时候阻止当前组件渲染，如果要这么做的话，证明你这个属性不适合作为 state，而应该作为静态属性或者放在 class 外面作为一个简单的变量 。
但是在函数式组件里面没有声明周期也没有类，那如何来做性能优化呢？
React.memo
首先要介绍的就是 React.memo，这个 API 可以说是对标类组件里面的 PureComponent，这是可以减少重新 render 的次数的。
可能产生性能问题的例子
举个
关于react hooks的性能优化相关推荐
- React有哪些性能优化的手段？
React有哪些性能优化的手段? 1.使用纯组件: 2.使用 React.memo 进行组件记忆(React.memo 是一个高阶组件),对 于相同的输入,不重复执行: 3.如果是类组件,使用 sho ...
- React 应用的性能优化思路
要点梗概 React 应用主要的性能问题在于多余的处理和组件的 DOM 比对.为了避免这些性能陷阱,你应该尽可能的在 shouldComponentUpdate 中返回 false . 简而言之,归结 ...
- 深入学习React函数组件性能优化三剑客useMemo、useCallback、memo
Hook使用规则 只能在函数的最外层调用Hook,不能在循环.条件判断或子函数中调用. 只能在React函数组件或自定义Hook中调用Hook,不可在其他JavaScript函数中使用. useMem ...
- 【React】1138- React Hooks 性能优化的正确姿势
前言 React Hooks 出来很长一段时间了,相信有不少的朋友已经深度使用了.无论是 React 本身,还是其生态中,都在摸索着进步.鉴于我使用的 React 的经验,给大家分享一下.对于 Rea ...
- （十三）react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题 用useState实现state和setState功能 用useEffect模拟组件生命 ...
- Android性能优化：手把手教你如何让App更快、更稳、更省（含内存、布局优化等）...
2019独角兽企业重金招聘Python工程师标准>>> 前言 在 Android开发中,性能优化策略十分重要 因为其决定了应用程序的开发质量:可用性.流畅性.稳定性等,是提高用户留存 ...
- android布局时长分析,Android性能优化：布局优化 详细解析（含、、讲解 ）
前言 在 Android开发中,性能优化策略十分重要 本文主要讲解性能优化中的布局优化,希望你们会喜欢. 目录 1. 影响的性能 布局性能的好坏 主要影响 :Android应用中的页面显示速度 2. ...
- React 框架原理与实战——04-03-React Hooks、Chakra-UI、组件性能优化、封装组件库
文章目录 1.Hooks 1.1 React Hooks 介绍 1.1.1 用来做什么 1.1.2 解决什么问题(类组件的不足) 1.2 如何使用 1.2.1 useState() 1.2.2 use ...
- react如何遍历并比较_[前端进阶] 这可能是最通俗易懂的React 渲染原理及性能优化...
如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...
最新文章
- 教授在飞机上做微积分，被当作恐怖分子抓了......
- 什么是数字孪生体？来自西门子、PTC、北航的精华观点和实践
- spring mvc java 把多文件打包成zip,并下载
- numpy 矩阵求逆_numpy 矩阵运算
- 想要获得别人尊重，你必须得自己先牛逼起来
- div设置背景半透明
- linux rewind函数,C语言rewind()函数：将文件指针重新指向文件开头
- jQuery Form Plugin (二) ：使用AJAX提交Form表单
- tomcat查看线程数
- 简单查询多个D速物流，并分析未签收延误的单号
- 东京原宿，表参道小游
- 北京大学c语言题库,北大acm题库1002题
- 5款cpu温度检测工具，让你时刻关注mac的工作情况！
- ps计算机海报设计,海报设计(ps标准平面海报设计尺寸一般多大)
- Sails基础之Controller层
- 结合PROFINET和OPC UA的优势监控现代化设备
- 炫舞服务器显示方框怎么回事,win10界面全是显示方块如何解决_win10系统界面出现白色方框该怎么去除-win7之家...
- 手里有200万，如何理财
- linux右键没有创建新文件夹,将新建文档添加回Ubuntu 18.04中的右键菜单
- USTC科研 7.1 and 7.3 配置环境的学习