Deep Dive React 4 How does React State actually work

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

1. setState is called
2. data is added to a queue
3. React starts handling the update
4. new state is calculated + getDerivedStateFromProps is called
5. shouldComponentUpdate is called with final (derived) state
6. render is called

---

7. DOM changes are made
8. componentDidUpdate is called
   © 著作权归作者所有,转载或内容合作请联系作者
   平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务