彼此反应性能问题 [英] Performance issue with React

问题描述

我读到作出反应是非常快的。最近，我写了一个应用程序来测试对角反应。不幸的是，我发现发生反应表现比角慢。
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

下面是源$ C ​​$ C的反应。我很新的反应。我知道我在做什么毛病我的反应code在这里。我觉得异常缓慢。
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的更好的使用。

我仍然不能让它快于角甚至接近它。
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操作角度更快。
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：

再是我的错。我没有错这使得它更快。分析后，我们呈现不正确。如果有人可以帮助我了解，如果这可以是任何更快。我知道是反应并不擅长处理大型阵列。在这种情况下，它在处理用四个三维阵列。 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 ='什么'，你必须使用的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（{一些：'不管'}）;

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

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