shouldComponentUpdate和内置diffing之间的区别



我知道如果shouldComponentUpdate()返回false,它将阻止调用render()方法。如果我在render()方法中使用了一些昂贵的逻辑,那么shouldComponentUpdate()是一个非常有用的东西,因为我可以阻止render()调用。

但是,如果我的render()方法只返回Element,而不执行任何昂贵的代码,该怎么办。

shouldComponentUpdate()中的比较(以PureComponent的实现为例(和render()调用时的内置React diffing之间有什么区别吗?

我认为这里写得很棒:https://reactjs.org/docs/reconciliation.html

主要的区别是React.PureComponent对旧道具和新道具以及旧状态和新状态进行了肤浅的比较,但内置的React diffing(reconcation(只是简单地比较了新旧DOM树,但请阅读上面的这篇文章,它会解决您的疑虑。

React告诉您在最大情况下避免,这将导致性能问题。React在更新组件元素方面非常聪明,在需要的地方使用key,React将匹配更新并更新DOM。React本身会对以前的道具和新道具进行比较,并更新dom。

使用shouldComponentUpdate((让React知道组件的输出不受当前状态或道具变化的影响。默认值行为是在每一次状态变化时重新渲染在大多数情况下,您应该依赖默认行为。

As per react组件只有在状态更改时才会重新渲染。

此方法仅作为性能优化而存在。不要依赖它可以"阻止"渲染,因为这可能会导致错误。考虑使用内置的PureComponent而不是编写shouldComponentUpdate((手工PureComponent对道具和状态,并减少跳过必要更新的机会。

来源:https://reactjs.org/docs/react-component.html#shouldcomponentupdate

如果你仍然想使用它,你需要衡量它的下行和上行。我认为你应该完全避免,因为通过比较,你可能会把事情搞砸的可能性更大。

PureComponent中的ShouldComponentUpdate((将对当前和以前的道具和状态进行浅层比较。它跳过了整个渲染过程,包括在此组件上调用render((及以下内容。这完全避免了和解过程。这意味着react不必更新V-DOM,也不需要与真实DOM进行比较。与肤浅的比较相比,这是一项昂贵的任务。

最新更新