元素数量一上来，react 就卡出翔了啊，怎么破？

#2

值得关注。

#3

你是单纯点击，还是进行了一些 dom 操作？

#4

楼主，react的事件绑定，用的就是事件委托。

#5

没有直接 dom 操作，类似 TodoMVC 。用 TodoMVC 试了下，也是这样，1000 条 todo，点了三次全选，第一次非常慢，后面的就会好很多了，不知道是什么懒加载机制
然后区别是，TodoMVC 点击单条 todo 是很快的，我这里的项目点击单条也是跟全选一副德行，不知道是哪里姿势不对……

#6

我也是这么认为的，于是就放心大胆地写上了，结果有点跌眼镜……
有时间还是得好好啃一下

#7

virtual dom不是只渲染有改动的dom么？

#8

是不是和使用不当有关，有次开发没注意，六个TAB就把我卡出翔。

#9

性能问题，最突出的就是父组件的state变化后，子组件无论是否变化都会render。

办法就是，在shouldComponentUpdate进行判断，真正选择哪些需要渲染。

最佳方案就是，Immutable配合React.addons.PureRenderMixin。

通过这样来提升React的性能。

2 Likes
#10

遇到过一次这样的情况，就是在写一个 side by side 功能时，需要 渲染几千行的代码，我是接前面后端同事写的react 代码写的。在给某一行代码添加评论时，要把这个评论给添加到这行代码后面。在前几行代码添加评论还好，如果是给几千行后面的代码添加评论，会卡的不行。我的解决办法就是让评论的添加和评论的编辑和其父组件没有关系（没用到 shouldComponentUpdate 方法）。每行代码都有一个 click 绑定来触发添加评论的事件，并没有卡顿现象。
然后，当渲染代码达到几万行的时候，就不是 react 的问题，而是浏览器的问题，github 几万行代码渲染也只是隐藏不显示。

#11

请问有遇到过首次渲染列表速度慢的问题吗？

#12

这个只能改变无效渲染的部分，当需要setstate去渲染的时候还是会遇到卡顿的问题。。

#13

之前我也遇到了，后来想了一个方法。

#14

元素多了，react的dom diff反而降低了性能，比如1000个li，点击某个li，需要给这个li加class=“selected”，react必须要diff 这个1000个li，然后在render。这样的问题在手机h5上更明显，我在h5的上遇到类似的问题，只能减少li的数量，并做shouldComponentUpdate优化。

#15

也没必要必须用jquery啊。归根结底就是委托啊。你直接在list 父元素上绑定click 事件，根据e.target 来操作元素啊。不知道我说的对不对呢？

#16

react使用virtual dom, 如果只改变一个item,是不会导致整个list重新渲染，看看每个item里面有没有设置key.

#17

确实不会导致整个list重新渲染，但是还是会对整个list diff，这个list很大的时候，diff过程就会慢

#18

我遇到类似的问题，请问你有什么办法解决吗，求教:joy:

#19

最简单的方法，让你的每个Item去extend PureComponent而不是Component。PureComponent的意义和具体用法请自行google。

#20



以上两篇文章可以解决问题

#21

我想说的是浏览器页面同时加载 Dom 特别多的情况下会出现类似的情况，我也遇到过，如何控制求教。