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:

1. 删除了上下文的使用.
2. 更好地使用 setState.
3. 更好地使用 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 use setState

this.setState({ some: 'whatever' });

this.setState({ some: 'whatever' });

这篇关于React 的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！