韩国五分彩分析:站多多网络

新闻资讯

五分彩骗局步骤 www.jp5n.cn 力求视觉与交互的完美契合,以规范的流程和专注的态度,为您提供全方位的设计服务

从功能角度看react组件拆分的重要性在哪里呢?

来源:武汉网站建设  浏览量:  发布时间:2017-06-01 09:24:40

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

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

1.初始组件化
该阶段会执行组件及其所有子组件的render方法,从而生成第一版的虚拟dom。
2.组件更新渲染。
组件的props或者state任意发生改变就会触发组件的更新渲染。默认情况下其也会执行该组件及其所有子组件的render方法获取新的虚拟dom。
我们说的性能瓶颈指的是组件更新阶段的情况。

执行该组件及其所有子组件的render方法获取更新后的虚拟DOM,即re-render,即使子组件无需更新。
然后对新旧两份虚拟DOM进行diff来进行组件的更新
在这个过程中,可以通过组件的shouldComponentUpdate方法返回值来决定是否需要re-render。

默认地,组件的shouldComponentUpdate返回true,即React默认会调用所有组件的render方法来生成新的虚拟DOM, 然后跟旧的虚拟DOM比较来决定组件最终是否需要更新。

根据上面的分析,react的性能瓶颈主要表现在:对于props和state没有变化的组件,react也要重新生成虚拟DOM及虚拟DOM的diff。

用should Component Update来进行性能优化

should Component Update需要判断当前属性和状态是否和上一次的相同,如果相同则不需要执行后续生成虚拟DOM及其diff的过程,否则需要更新。

其中,isEqual方法为判断两个对象是否相等(指的是其对象内容相等,而不是全等)。

通过显示覆盖shouldComponentUpdate方法来判断组件是否需要更新从而避免无用的更新,但是若为每个组件添加该方法会显得繁琐,好在react提供了官方的解决方案,具体做法:

方案对组件的shouldComponentUpdate进行了封装处理,实现对组件的当前属性和状态与上一次的进行浅对比,从而决定组件是否需要更新。

一种是基于ES5的React.createClass创建的组件,配合该形式下的mixins方式来组合PureRenderMixin提供的shouldComponentUpdate方法。当然用ES6创建的组件也能使用该方案。

因为state的value被赋予另一个对象,使nextState.value与this.props.value始终不等,导致浅比较通过不了。在实际项目中,这种嵌套的对象结果是很常见的,如果使用PureRenderMin或者PureComponent方式时起不到应有的效果。

虽然可以通过深比较方式来判断,但是深比较类似于深拷贝,递归操作,性能开销比较大。

为此,可以对组件尽可能的拆分,使组件的props和state对象数据达到扁平化,结合着使用PureRenderMin或者PureComponent来判断组件是否更新,可以更好地提升react的性能,不需要开发人员过多关心。

组件拆分,在react中就是将组件尽可能的细分,便于复用和优化。拆分的具体原则:尽量使拆分后的组件更容易判断是否更新。

这不太好理解,举个例子吧:假设我们定义一个父组件,其包含了5000个子组件。有一个输入框输入操作,每次输入一个数字,对应的那个子组件背景色变红。

本例中,输入框组件和列表子组件有着明显的不同,一个是动态的,输入值比较频繁;一个是相对静态的,不管input怎么输入它就是5000项。输入框每输入一个数字都会导致所有组件re-render,这样就会造成列表子组件不必要的更新。

可以看出,上面列表组件的更新不容易被取消,因为输入组件和列表子组件的状态都置于父组件state中,二者共享;react不可能用shouldComponentUpdate的返回值来使组件一部分组件更新,另一部分不更新。 只有把他们拆分为不同的组件,每个组件只关心对应的props。拆分的列表组件只关心自己那部分属性,其他组件导致父组件的更新在列表组件中可以通过判断自己关心的属性值情况来决定是否更新,这样才能更好地进行组件优化。

尽量使拆分组件的props和state数据扁平化

这主要是从组件优化的角度考虑的,如果组件不需过多关注性能,可以忽略。

拆分组件之所以扁平化,是因为React提供的优化方案PureRenderMin或者PureComponent是浅比较组件的props和state来决定是否更新组件。

上面的列表组件中,this.state.items存放的是对象数组,为了更好的判断每项列表是否需要更新,可以将每个li列表项单独拆分为一个列表项组件,每个列表项相关的props就是items数组中的每个对象,这种扁平化数据很容易判断是否数据发生变化。

为了这篇文章专门写了一个有关添加展示Todo列表的事例库??寺〈氲奖镜乜梢栽诒镜卦诵行Ч?。

该事例库是一个有着5000项的Todo列表,可以删除和新增Todo项。该事例展示了组件拆分前和拆分后的体验对比情况,可以发现有性能明显的提升。

下面我们结合react的性能检测工具react-addons-perf来说明组件拆分的情况。

为了弄清楚是什么原因导致卡顿现象,我们使用chrome的devTool来定位,具体的做法是使用最新版的chrome浏览器的Performance选项来完成。先点击该选项中的record按钮开始记录,这时我们在组件输入框输入一个字符,然后点击stop来停止记录,我们会看到组件从输入开始到结束这段时间内的一个性能profile。

从图可以看出我们在输入单个字符时,输入框的input事件逻辑几乎占据整个响应时间,具体的处理逻辑主要是react层面的batchedUpdates方法批量更新列表组件,而不是用户自定义的逻辑。

那么,批量更新为啥占据这么多时间呢,为了搞清楚原因,我们借助基于react-addons-perf的chrome插件chrome-react-perf,它以chrome插件的形式输出分析的结果。

使用该插件需要注意一点的是:chrome-react-perf插件的使用需要在项目中引入react-addons-perf???,并必须将其对象挂载到window全局对象的Perf属性上,否则不能使用。

在devTool工具中选择Perf选项试图,点击start按钮后其变成stop按钮,在组件输入框中输入一个字符,然后点击Perf试图中的stop按钮,就会得出对应的性能试图。
 
上图提供的4个视图中,Print Wasted对分析性能最有帮组,它表示组件没有变化但是参与了更新过程,即浪费了re-render和vdom-diff这一过程,是毫无意义的过程。从图可以看出:TodosBeforeDivision和TodoItem组件分别浪费了167.88ms、144.47ms,这完全可以通过拆分组件避免的开销,这是react性能优化重点。

为此我们需要对TodosBeforeDivision组件进行拆分,拆分为一个带有input和button的动态组件AddTodoForm和一个相对静态的组件TodoList。二者分别继承React.PureComponent可以避免不必要的组件更新。

拆分后的组件性能有了上百倍的提升,虽然其中还包含一些其他优化,例如不将function在组件属性位置绑定this以及常量对象props缓存起来等避免每次re-render时重新生成新的function和新的对象props。

总的来说,对react组件进行拆分对react性能的提升是非常重要的,这也是react性能优化的一个方向。
五分彩骗局步骤五分彩骗局步骤 www.jp5n.cn
这篇文章太赞了我也要点赞!

11

郑重声明 Solemn Statement
本文来源://www.jp5n.cn 作者:武汉网站建设@武汉站多多 网络营销策划,本文由武汉站多多版权所有,未经批准转载必究。
最新案例
LATEST CASE
查看更多+
  • 小太阳
  • 汇聚恒源广告
  • 垄上优选
  • 净美雅
  • 成长衣派
  • 空见设计
  • 汇研生物
  • 武汉中国旅行社
  • 知行学院
  • 武汉绿道园林
  • 北京中投民生证券咨询有限公司
  • 万福文化
  • 武汉纳可机械
  • 罗斯蒙特
  • 武汉现代物流
  • 蓝高无忧

武汉站多多 - 武汉网站建设终极解决方案

或许,我们能为您做的还很多...

400-8084-027 / 027-87317566
站多多客服X
服务热线:

027-87317566
400-8084-027

  • 宝马宣布调整进口车价格 X5、6系GT等降幅超5万元 2019-05-19
  • 【理上网来·喜迎十九大】这五年,生态文明建设从理念到实践取得四大成就 2019-05-19
  • 默滕斯神仙球卢卡库2球 比利时3 2019-05-18
  • 消除“毒跑道”,关键在标准 2019-05-18
  • 海尔发行境外上市外资股获批 2019-05-15
  • 习近平多次引用的张载“横渠四句”究竟有何深意? 2019-05-13
  • 综合消息:也门荷台达战事仍在持续 联合国特使斡旋暂无进展 2019-05-11
  • 河北省电视剧《太行赤子》在央视播出引发热烈反响 2019-05-09
  • 你不看文章的内容吗? 2019-05-09
  • 咸阳“四胞胎”出门就被围观 父母靠直播养活全家 2019-04-19
  • 通过学历教育、职业培训、在线学习等渠道 新区居民将享天津职教资源 2019-04-05
  • 美边境政策被斥拆散难民家庭:最远的距离是你在这头,我在那头 2019-04-05
  • 人事 江西两设区市任免一批领导干部 2019-04-02
  • 全省手机报推广发行经验交流会在大悟召开 2019-03-28
  • 西藏积极开展防沙治沙宣传 建设美丽西藏 2019-03-26
  • 947| 330| 26| 241| 573| 760| 271| 110| 485| 545|