好程序员网络前端教程之反应原理解析及优化技巧

  

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

  

     好程序员网络前端教程之反应原理解析及优化技巧”>
  
  
  
  
  <p> reactjs起源于Facebook内部项目,是一个用来构建用户界面的JavaScript库,相当于MVC架构中的V层框架。与市面上其他框架不同的是,反应把每一个组件当成了一个状态机,组件内部通过状态来维护组件状态的变化,当组件的状态发生变化时,反应通过虚拟DOM技术来增量并且高效的更新真实DOM。</p>
  <p>反应核心技术——虚拟DOM(虚拟DOM):对于每一个组件,反应会在内存中构建一个相对应的DOM树,基于反应开发时所有的DOM构造都是通过虚拟DOM进行,每当组件的状态发生变化时,反应都会重新构建整个DOM数据,然后将当前的整个DOM树和上一次的DOM树进行对比,得出DOM结构变化的部分(斑块内),然后将这些斑块内再更新到真实DOM中。整个过程都是在内存中进行,因此是非常高效的。</p>
  <p>反应把每个组件都当作一个状态机来维护和管理,因此每个组件都拥有一套完整的生命周期,大致可以分为三个过程:初始化,更新和销毁。生命周期的每一个过程都明确的反映了组件的状态变化,对于开发来说就能很容易的把握组件的每个状态,不同的状态时期做对应的事情,互不干扰。</p>
  <p>反应性能优化技巧</p>
  <p>由于中反应性能主要耗费在于更新阶段的diff算法,因此性能优化也主要针对diff算法。</p>
  <p> 1,减少diff算法触发次数。减少diff算法触发次数实际上就是减少更新流程的次数,正常进入更新流程有三种方式:设置状态,父组件呈现,forceUpdate。</p>
  <p> 2, shouldComponentUpdate。使用shouldComponentUpdate钩子,根据具体的业务状态,减少不必要的道具变化导致的渲染。如一个不用于渲染的道具导致的更新。另外,也要尽量避免在shouldComponentUpdate 中做一些比较复杂的操作,比如超大数据的选择操作等。</p>
  <p>如果你想了解更多反应知识点,可以关注“好程序员“微信公众号,定期发布技术热点和求职指南。你也可以来好程序员网络前端培训班进行系统的学习进阶,跟随大牛讲师快速、高效的学习提升。</p><h2 class=好程序员网络前端教程之反应原理解析及优化技巧