好程序员Web前端教程之React原理解析及优化技巧-阿里云开发者社区

开发者社区> 好程序员> 正文

好程序员Web前端教程之React原理解析及优化技巧

简介:
+关注继续查看
 好程序员Web前端教程之React原理解析及优化技巧,React既是当前企业选拔人才的主要技能之一,也是每一个Web前端人才需要掌握的知识。有不少同学想要快速掌握React,接下来就给大家简单介绍React原理以及相关性能优化技巧。
 ReactJS起源于Facebook内部项目,是一个用来构建用户界面的JavaScript库,相当于MVC架构中的V层框架。与市面上其他框架不同的是,React把每一个组件当成了一个状态机,组件内部通过state来维护组件状态的变化,当组件的状态发生变化时,React通过虚拟DOM技术来增量并且高效的更新真实DOM。

 React核心技术——虚拟DOM(Virtual DOM):对于每一个组件,React会在内存中构建一个相对应的DOM树,基于React开发时所有的DOM构造都是通过虚拟DOM进行,每当组件的状态发生变化时,React都会重新构建整个DOM数据,然后将当前的整个DOM树和上一次的DOM树进行对比,得出DOM结构变化的部分(Patchs),然后将这些Patchs再更新到真实DOM中。整个过程都是在内存中进行,因此是非常高效的。

 React把每个组件都当作一个状态机来维护和管理,因此每个组件都拥有一套完整的生命周期,大致可以分为三个过程:初始化、更新和销毁。生命周期的每一个过程都明确的反映了组件的状态变化,对于开发来说就能很容易的把握组件的每个状态,不同的状态时期做对应的事情,互不干扰。

 React性能优化技巧

 由于React中性能主要耗费在于update阶段的diff算法,因此性能优化也主要针对diff算法。

 1、减少diff算法触发次数。减少diff算法触发次数实际上就是减少update流程的次数,正常进入update流程有三种方式:setState、父组件render、forceUpdate。

 2、shouldComponentUpdate。使用shouldComponentUpdate钩子,根据具体的业务状态,减少不必要的props变化导致的渲染。如一个不用于渲染的props导致的update。另外,也要尽量避免在shouldComponentUpdate 中做一些比较复杂的操作, 比如超大数据的pick操作等。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C 语言项目_项目流程|学习笔记
快速学习 C 语言项目_项目流程
5 0
mysql事务隔离级别
mysql事务隔离级别
9 0
MySQL MGR模式介绍
MGR是Mysql Group Replication(组复制)的缩写,Mysql5.7之后是以一个Mysql插件的形式集成在Mysql中,用于创建可伸缩、高可用、可容错的复制架构,是Mysql集群的一种形式
8 0
SpringBoot时间格式化的5种方法!(9)
SpringBoot时间格式化的5种方法!(9)
5 0
图解:为什么非公平锁的性能更高?(3)
图解:为什么非公平锁的性能更高?(3)
7 0
Bootstrap 起步|学习笔记
快速学习 Bootstrap 起步
4 0
干了3年程序员,熬夜一周整理的高性能MySQL笔记,小白也能看懂!
MySQL高性能第三版更新了大量的内容,不但涵盖了最新版MySQL的新特性以外,还讲述了关于固态盘、高可拓展性设计和云计算环境下的数据库相关的新内容,原有的基准测试和性能优化部分也做了大量的扩展和补充,全书分为16个知识点点
11 0
synchronized 优化手段之锁膨胀机制!(1)
synchronized 优化手段之锁膨胀机制!(1)
5 0
SpringBoot时间格式化的5种方法!(3)
SpringBoot时间格式化的5种方法!(3)
6 0
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
5 0
+关注
333
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载