在ReactJS中使用forceUpdate是否比setState（）慢？

Question

I'm experimenting with building a ReactJS app that doesn't use ReactJS components state or props for display data. Instead I use props for passing models to the component so that it will bind self to it, and get re-rendered on model data change.

I would like to keep the component state 'clean' in such way that the component's state would only contain data about user experience related stuff. If you are familiar with Firebase, the apps works very much like when building a react app using Firebase, but it should be more declarative.

Because I do not use component.setState({...}) I would like to use component.forceUpdate . I have read many times that you shouldn't use this method because it skips the lifecycle methods, but this is an experiment.

What I'm mostly interested in right now is whether it is slower than setState and does ReactJS do the same smart DOM diffing when an update is forced?

Answer 1

React's forceUpdate() is not slower than setState() .

It uses the same smart DOM "diffing" algorithm , so that component updates are predictable while being fast enough for high-performance apps.

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate() . This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

PS: Yes, normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in the Component's render() method.