0. Why do we need Fiber
In versions before React16, the update process is synchronous, which may cause performance problems.
For example, it takes 1ms to update one component, 200ms is required to update 200 components, and nothing else can be done during this 200ms
For example, if you enter content into the input box, you will find that there is no response. After 200ms, all pops will come out. This is a page freeze!
1. What is Fiber
React Fiber is a re-implementation of React's core algorithm!
Fiber's idea is to fragment the time-consuming synchronization task and fragment the update process! The running time of each small piece is very short. Although the total time is still very long, after each small piece is executed, other tasks are given a chance to execute, so that the only thread will not be monopolized!
After Fiber completes a period of update process, it returns control to the React module responsible for task coordination to see if there are other urgent tasks to be done, if not, continue to update, if there is an urgent task, then do the urgent task.
Maintaining the data structure of each shard is the Fiber.
2. Life Cycle
constructorInitialization: getDerivedStateFromProps, render, ,componentDidMount
getDerivedStateFromPropsUpdate: shouldComponentUpdate, render, ,componentDidUpdate
destroy:componentWillUnmount
3. React 17
There is no new function, support multi-version mixed use, prepare for the smooth upgrade of the new version in the future, a strategic version that connects the past and the next!
The mechanism of event delegation has changed, move closer to native browsers, delete event pools, useEffect cleanup operations are changed to asynchronous operations, JSX cannot return undefined, delete some private APIs
4. Hooks
A special kind of function, inject special functions into your functional components! One of the purposes is to add state to functional components, and the second is to reuse code!