Deep Dive React 4 How does React State actually work

苹果醋32025-08-09 15:55

In other word, how does React handle updates?

How React communicates with the renderer

复制代码

setState(...args) {
  this.updater.enqueueSetState(this, ...args);
}

The Update

When we call setState, React adds the passed data to a queue
The updates are later handled one by one, but the changes are applied at the same time at the end (flushed to the DOM at once)

Lifecycle & 2 phases

Screen Shot 2022-08-18 at 9.12.01 PM.png

复制代码

static getDerivedStateFromProps(props, state) {
  console.log('this is the only static lifecycle methods, cannot access this, window');
  return state;
}

Update Steps

happend in 2 phases

setState is called
data is added to a queue
React starts handling the update
new state is calculated + getDerivedStateFromProps is called
shouldComponentUpdate is called with final (derived) state
render is called

DOM changes are made