React 的性能问题 [英] Performance issue with React
问题描述
我读到 React 非常快.最近,我写了一个应用程序来测试对 angular 的反应.不幸的是,我发现 react 的执行速度比 angular 慢.http://shojib.github.io/ngJS/#/speedtest/react/1
I read about React being very fast. Recently, I wrote an app to test react against angular. Unfortunately I found react performing slower than angular. http://shojib.github.io/ngJS/#/speedtest/react/1
这里是react的源代码.我很新来反应.我确定我在这里的反应代码有问题.我发现它异常缓慢.https://jsbin.com/viviva/edit?js,output
Here is the source code for react. I'm very new to react. I am sure I'm doing something wrong with my react code here. I find it unusually slow. https://jsbin.com/viviva/edit?js,output
看看有没有反应专家能找到瓶颈.
See if any react experts can find the bottlenecks.
更新 1:
- 删除了上下文的使用.
- 更好地使用 setState.
- 更好地使用 shouldComponentUpdate.
我仍然无法让它比 angular 更快,甚至无法接近它.https://jsbin.com/viviva/96/edit?js,output
I still can't make it faster than angular or even close to it. https://jsbin.com/viviva/96/edit?js,output
更新 2:
我在单元组件中创建二维数组犯了一个大错误.所以我把它们移到了 mixin 中.现在我相信在 DOM 操作中,react 比 angular 更快.https://jsbin.com/nacebog/edit?html,js,output
I made a big mistake by creating 2d arrays in the cell component. So I moved them to a mixin. Now I believe that react is faster than angular in DOM manipulations. https://jsbin.com/nacebog/edit?html,js,output
更新 3:
我又犯错了.我做错了这让它更快.经过分析,它渲染不正确.如果有人可以帮助我理解,是否可以更快.我知道 react 不擅长处理大型数组.在这种情况下,它处理四个 3d 数组.https://jsbin.com/viviva/100/edit?html,css,js
My mistake again. I did it wrong which made it faster. After analysis, it was rendering incorrectly. If anyone can help me understand, if this could be any faster. I know react is not good at dealing large arrays. In this scenario, it's dealing with four 3d arrays. https://jsbin.com/viviva/100/edit?html,css,js
推荐答案
在我看来,这是一个非常人为的例子.
This is a very contrived example in my opinion.
- 如上所述,您使用的上下文不正确.
- 不需要混合:列数和行数可以而且应该作为道具传递.
create2DArray
、getRandomNumber
应在脚本顶部声明为简单的全局函数. 您设置的状态不正确.你永远不应该像这样改变状态
this.state.some = 'whatever'
,你必须使用setState
- As stated above, you are using context incorrectly.
- There is no need for a mixin: the number of columns and rows can and should be passed down as props.
create2DArray
,getRandomNumber
should be declared at the top of your script as simple global functions. You are setting the state incorrectly. You should never change the state like this
this.state.some = 'whatever'
, you have to usesetState
this.setState({ some: 'whatever' });
this.setState({ some: 'whatever' });
这篇关于React 的性能问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!