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

好程序员Web前端教程之React原理解析及优化技巧,React既是当前企业选拔人才的主要技能之一,也是每一个Web前端人才需要掌握的知识。有不少同学想要快速掌握React,接下来就给大家简单介绍React原理以及相关性能优化技巧。

创新互联公司专业提供成都服务器托管服务,为用户提供五星数据中心、电信、双线接入解决方案,用户可自行在线购买成都服务器托管服务,并享受7*24小时金牌售后服务。

好程序员Web前端教程之React原理解析及优化技巧点击添加图片描述(最多60个字) 编辑

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操作等。

如果你想了解更多React知识点,可以关注“好程序员”微信公众号,定期发布技术热点和求职指南。你也可以来好程序员Web前端培训班进行系统的学习进阶,跟随大牛讲师快速、高效的学习提升。


本文标题:好程序员Web前端教程之React原理解析及优化技巧
文章分享:http://myzitong.com/article/jhseio.html