IT技术 - React 的性能问题 - 吾爱随笔录

IT技术 angularjs reactjs

2021-04-06 21:58:47

我读到 React 非常快。最近，我写了一个应用程序来测试对 angular 的react。不幸的是，我发现 react 的执行速度比 angular 慢。 http://shojib.github.io/ngJS/#/speedtest/react/1

这是react的源代码。我很新来react。我确定我在这里的react代码有问题。我发现它异常缓慢。 https://jsbin.com/viviva/edit?js,output

看看有没有react专家能找到瓶颈。

更新 1：

我仍然无法使它比 angular 更快，甚至无法接近它。 https://jsbin.com/viviva/96/edit?js,output

更新 2：

我在单元组件中创建二维数组犯了一个大错误。所以我把它们移到了一个 mixin 中。现在我相信在 DOM 操作中，react 比 angular 更快。 https://jsbin.com/nacebog/edit?html,js,output

更新 3：

又是我的错。我做错了这让它更快。经过分析，它渲染不正确。如果有人可以帮助我理解，是否可以更快。我知道 react 不擅长处理大型数组。在这种情况下，它处理四个 3d 数组。https://jsbin.com/viviva/100/edit?html,css,js

3个回答

React 的表现被夸大了。对于大多数实际用例来说，它已经足够快了。渲染大列表是它的主要弱点。

此外，这始终返回 true（除非更新由 setState 触发）。你需要对props进行浅比较。

  shouldComponentUpdate: function(nextProps, nextState) {
    return this.props !== nextProps;
  }

你应该在你使用上下文的地方使用props。

此外，React 不是渲染大型列表的最佳选择，但有一些潜在的优化还没有经过大量实验。我在这里做了一些：stackoverflow.com/questions/30976722/...

2021-06-03 21:58:47

我不知道上下文是否会降低性能。但我发现上下文非常有用。如果我想将信息从父级传递给孙子而不先将其传递给子级，则可以使用上下文来实现。如果我有一个更复杂的层次结构，我不想将信息传递给所有子节点——尽管我的意思是这些信息仅适用于孙节点。

2021-06-07 21:58:47

@user730009 上下文并不意味着用于将数据传递到整个树，而是将不经常更改的数据传递到整个树。如果您的上下文数据发生变化，您应该非常小心地更新整个树，因为不会触发重新渲染。如果你想在没有样板的情况下将数据传递给一个深层次的孩子，你应该考虑 Flux 或 Redux

2021-06-18 21:58:47

在我看来，这是一个非常人为的例子。

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

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

mixin 本身并没有错。我只是说我不认为在这个特定的例子中它们是必要的。此外，mixin 的 API 可能会在未来消失，这是一个有趣的阅读：medium.com/@dan_abramov/...

2021-06-02 21:58:47

您使用的上下文不正确，文档指出：

特别是，在使用它来“保存输入”并使用它而不是传递显式props之前，请三思。

它最有利于传递上下文对象，例如当前登录的用户或 redux 存储。您的应用程序在应该使用props时使用了上下文。

您需要确保这shouldComponentUpdate是一个有意义的谓词。见https://facebook.github.io/react/docs/advanced-performance.html

如果你纠正这两件事，与 Angular 相比，它将是一个更好的 React 性能衡量标准。目前，您已经拥有一辆经过精心调校的法拉利与一辆 T 型福特车型（用口香糖固定在一起）。

其它你可能感兴趣的问题