react循环setstate_[React] 8 - React 自身或工程性能优化点?

持续补充。

1. setState 数据合并一次处理

React底层对setState进行性能的提升机制。数据多次改变，合并一次处理。

降低React diff match 比对频率。

LIN.JY666：[React] 4 - setState / 异步还是同步?zhuanlan.zhihu.com

2. 作用域绑定在constructor 里只绑定一次

将this.handleClick3 = this.handleClick3.bind(this) 放到constructor。

保证该函数的作用域绑定一次，避免其他的渲染。

// 三种方式
// 1. 构造器绑定
constructor (props) {super(props)this.handleClick3 = this.handleClick3.bind(this)}// 2. 箭头函数
<button onClick={() => this.handleClick2()}>// 3. bind方式
<button onClick={this.handleClick4.bind(this)}>

LIN.JY666：[React] 3 - 自动绑定 (事件绑定)zhuanlan.zhihu.com

3. React Fiber 16+ 任务调度优化

diff 如果很深的时候，会一直占用JS主进程的(因为单线程)，用户操作效果就是，卡顿。
Fiber 本质上是对调用的一个优化。分片，就是大的任务分成小的一步步的解决。
React Fiber 是一种基于浏览器的单线程调度算法。16以下都是用的递归算法，无法停止。16+ 用的都是循环方式。

LIN.JY666：[React] 6 - React Fiber 基于浏览器的单线程调度算法zhuanlan.zhihu.com

4. 组件

shouldComponentUpdate 可执行业务决定是否render
无状态使用Pure 组件
HOC 高阶组件模式，复用组件。

5. React key

VirtualDOM diff算法，用key来提升比对速度。

6. 其他工程方面

webpack 按需加载, 代码分割，单个bundle打包多个(一个vendor + 一个业务)，tree shaking。
服务端渲染。

react循环setstate_[React] 8 - React 自身或工程性能优化点?相关推荐

react循环key值_01 React快速入门（一）——使用循环时对于‘key’报错处理
问题描述: 在刚开始接触react学习的时候,编写一个小功能时,使用了map来循环一个数组中的数据,输出到前端页面,代码调试运行后正常显示,但是打开控制台却发现有一条关于"key" ...
react循环渲染数据
react循环输出元素代码说明:index->索引 key:循环语句时的唯一标识一.循环普通数组 1.map循环方式(foreach同理) render() {const items = [ ...
react仿微信聊天室|react即时聊天IM系统|react群聊
react+redux仿微信聊天IM实战|react仿微信界面|react多人群聊天室最近一直捣鼓react开发,就运用react开发了个仿微信聊天室reactChatRoom项目,基于react+ ...
React学习笔记7：React使用注意事项
1. setState setState更新状态的2种写法方式一:setState(stateChange, [callback])------对象式的setState stateChange为状态 ...
React学习笔记6：React Hooks API总结
useState-保存状态(惰性初始化) 作用函数组件添加状态注意事项初始化以及更新state 用来声明状态变量使用步骤(使用useState来创建状态) 引入import React,{us ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
react 遍历对象_探索：跟随《Build your own React》实现一个简易React
文章介绍 build-your-own-react是一篇操作说明书,指导用户一步步实现一个简易的React,从中了解到React的大体工作流程.这篇文章是我的观后整理和记录,或许对大家会有所帮助. 构 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

react循环setstate_[React] 8 - React 自身或工程性能优化点?

1. setState 数据合并一次处理

2. 作用域绑定在constructor 里只绑定一次

3. React Fiber 16+ 任务调度优化

4. 组件

5. React key

6. 其他工程方面

react循环setstate_[React] 8 - React 自身或工程性能优化点?相关推荐

最新文章

热门文章

react循环setstate_[React] 8 - React 自身或工程性能优化点?

1. setState 数据合并一次处理

2. 作用域绑定 在constructor 里只绑定一次

3. React Fiber 16+ 任务调度优化

4. 组件

5. React key

6. 其他工程方面

react循环setstate_[React] 8 - React 自身或工程性能优化点?相关推荐

最新文章

热门文章

2. 作用域绑定在constructor 里只绑定一次