一尘不染

React的性能问题

angularjs

我读到React非常快。最近,我写了一个应用程序来测试对角的反应。不幸的是,我发现反应的表现要慢于角度反应。
http://shojib.github.io/ngJS/#/speedtest/react/1

这是react的源代码。我是新来的人。我确定我的反应代码在这里做错了。我发现它异常缓慢。
https://jsbin.com/viviva/edit?js,输出

看看是否有任何反应专家可以找到瓶颈。


更新1:

  1. 删除了上下文的用法。
  2. 更好地使用setState。
  3. 更好地使用shouldComponentUpdate。

我仍然无法使它快于角形甚至接近角形。
https://jsbin.com/viviva/96/edit?js,输出


更新2:

通过在单元组件中创建2d数组,我犯了一个大错误。所以我将它们移到了mixin。现在,我相信在DOM操作中,反应要比角度更快。
https://jsbin.com/nacebog/edit?html,js,输出


更新3:

我的错误再次出现。我做错了,这使它更快。经过分析,它渲染不正确。如果有人可以帮助我理解,这可以更快。我知道反应并不擅长处理大型阵列。在这种情况下,它将处理四个3d阵列。https://jsbin.com/viviva/100/edit?html,css,js


阅读 204

收藏
2020-07-04

共1个答案

一尘不染

我认为这是一个非常人为的例子。

  • 如上所述,您使用的上下文不正确。
  • 不需要混合:列数和行数可以并且应该作为道具传递。create2DArraygetRandomNumber应在脚本顶部声明为简单的全局函数。
  • 您设置的状态不正确。永远不要这样改变状态this.state.some = 'whatever',必须使用setState

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

2020-07-04