反应 Js 性能

Question

我正在使用 react(V0.13.3),flux(V2.0.3)

我有一个包含许多内部组件的组件。

当内部组件更新时，浏览器正在关闭。我无法滚动点击，有时我会弹出一条消息：

你想停止无响应的脚本。

我正在关注所有 React 生命周期方法并实现 shouldComponentUpdate 方法。

我认为 DOM Diffing 占用了分配给浏览器的大量 CPU 时间和 RAM。

知道我为什么会遇到这个问题以及如何解决这个问题吗？

Answer 1

Reactjs 很容易进入无休止的渲染周期。假设您在 componentDidUpdate 中放置了一个从服务器中提取数据的方法，它改变了父组件使用的 reducer。繁荣。组件树重新呈现。您的 shouldComponentUpdate 可能没用，因为输入的引用不同。服务器再次受到攻击。无尽的循环。

解决方案是使用警卫。当您第一次点击您的 componentDidUpdate（或您点击后台）方法时，改变减速器的方法应该在减速器上设置一种 IsLoading 变量。你检查这个变量，看看你是否应该再次触发你的变异请求。这可以防止不必要的重新渲染