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

好程序员Web前端教程之React原理解析及优化技巧，React既是当前企业选拔人才的主要技能之一，也是每一个Web前端人才需要掌握的知识。有不少同学想要快速掌握React，接下来的好程序员web前端学习进阶课就给大家简单介绍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操作等。