admin管理员组

文章数量:1334133

I know that a key point of optimization for React is by using shouldComponentUpdate() lifecycle hook to check the current state/props against the next/state props.

If I'm building a React application using mostly functional ponents, rather than class-based, stateful ponents (that have access to lifecycle hooks), do I forego this particular optimization? Can I perform a similar check inside of a functional ponent?

I know that a key point of optimization for React is by using shouldComponentUpdate() lifecycle hook to check the current state/props against the next/state props.

If I'm building a React application using mostly functional ponents, rather than class-based, stateful ponents (that have access to lifecycle hooks), do I forego this particular optimization? Can I perform a similar check inside of a functional ponent?

Share Improve this question edited Jul 14, 2016 at 20:57 Himmel asked Jul 14, 2016 at 20:35 HimmelHimmel 3,7097 gold badges43 silver badges78 bronze badges 3
  • You can't do the similar check in stateless functional ponents, as it renders the same result given the same props/state. And it doesn't have access to nextProps/nextState. – Galeel Bhasha Commented Jul 14, 2016 at 21:16
  • Does that mean stateless ponents forego this optimization? Are they less performant as a result? – Himmel Commented Jul 14, 2016 at 21:20
  • @Himmel I missunderstood your question. Gave it another try! :-) – TimoStaudinger Commented Jul 14, 2016 at 21:47
Add a ment  | 

1 Answer 1

Reset to default 10

Stateless ponents are candidates for optimization in the future and the docs hint at it without going into details:

In an ideal world, most of your ponents would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these ponents by avoiding unnecessary checks and memory allocations. This is the remended pattern, when possible.

Source


Currently however, stateless ponents do not optimize performance by skipping the render process if the props are unchanged. This has been confirmed by a member of the react team:

For plex ponents, defining shouldComponentUpdate (eg. pure render) will generally exceed the performance benefits of stateless ponents. The sentences in the docs are hinting at some future optimizations that we have planned, whereby we won't allocate an internal instance for stateless functional ponents (we will just call the function). We also might not keep holding the props, etc. Tiny optimizations. We don't talk about the details in the docs because the optimizations aren't actually implemented yet (stateless ponents open the doors to these optimizations).

[...]

There are discussions about having a pureRender flag that you could set on the function, or allowing it to participate in the shouldUpdate lifecycle, but that's currently not implemented. At the moment, stateless functions can not be pure-render.

It is worth keeping in mind that sometimes people abuse/overuse pure-render; it can sometimes be as or more expensive than running the render again, because you're iterating over the array of props and potentially doing things like string pares, which is just extra work for ponents that ultimately return true and then proceed to rerender anyway. PureRender / shouldComponentUpdate really is considered an escape hatch for performance and is not necessarily something that should be blindly applied to every ponent.

Source


My takeaway from this discussion is that in certain cases for plex ponents, the performance can be increased by implementing shouldComponentUpdate in parison to stateless ponents. On the other hand, I would strongly consider whether the performance benefits are significant enough to outweigh the added plexity and bigger footprint of the ponent.

本文标签: