React既是当前企业选拔人才的主要技能之一，也是每一个Web前端人才需要掌握的知识。有不少同学想要快速掌握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操作等。

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

上一篇

郑州UI设计师就业薪资高吗

下一篇

一大波福利来袭 快速学习Web前端跨端框架的秘密武器