从性能角度，如何评估React组件的价值？

本文共计3314个文字，预计阅读时间需要14分钟。

React是一个UI库，它使用虚拟DOM技术减少JavaScript与真实DOM的交互，提升前端性能；采用单向数据流机制，父组件通过props将数据传递给子组件，使数据流向一目了然。

React是一个UI层面的库，它采用虚拟DOM技术减少Javascript与真正DOM的交互，提升了前端性能；采用单向数据流机制，父组件通过props将数据传递给子组件，这样让数据流向一目了然。一旦组件的props或则state发生改变，组件及其子组件都将重新re-render和vdom-diff，从而完成数据的流向交互。但是这种机制在某些情况下比如说数据量较大的情况下可能会存在一些性能问题。下面就来分析react的性能瓶颈，并用结合着react-addons-perf工具来说明react组件拆分的重要性。

react性能瓶颈

要了解react的性能瓶颈，就需要知道react的渲染流程。它的渲染可以分为两个阶段：

• 初始组件化
  该阶段会执行组件及其所有子组件的render方法，从而生成第一版的虚拟dom。

• 组件更新渲染。
  组件的props或者state任意发生改变就会触发组件的更新渲染。