current position:Home>Relearn react (1) - recognize the life cycle

Relearn react (1) - recognize the life cycle

2022-04-29 08:10:23A programmer who can only write bugs

Recently found himself out 了 , about react Our understanding can't keep up with the times . So I feel like recording the way to learn again .
17 Year study react When , Then still react14.x edition , The life cycle is like this
 Insert picture description here

Create a stage :

Update phase :

// This method when props Execute when there is a change , initialization render When does not perform , In this callback function , You can change according to the attributes , By calling this.setState() To update your component status , Old properties can still be accessed through this.props To get , It is safe to call update state here , It doesn't trigger extra render call
Benefits of use : In this life cycle , You can use the render Get new before function execution props, To update the subcomponent's own state. Data requests can be executed here , The parameters to be transmitted are from componentWillReceiveProps(nextProps) In order to get . You don't have to put all the requests in the parent component . So the request will only be issued when the component is rendered , Thus reducing the burden of requests .componentWillReceiveProps Initializing render It doesn't work , It will be Component Accept a new state (Props) Is triggered , It is generally used for re rendering of child components when the state of the parent component is updated


// Accept the data that needs to be updated , And returns a Boolean value ( The default is true),true Means to refresh , Go to the next step ,false Instead, when initializing or using forceUpdate Not called when

shouldComponentUpdate(nextProps, nextState): boolean

Unloading phase :

16.3 After a wave of updates
 Insert picture description here

Removed many lifecycles , Include componentWillReceiveProps componentWillMount componentWillUpdate, The life cycle of the update phase leaves only one shouldComponentUpdate

According to the official statement , Used to be used by deprecate Functions that can only be realized by all life cycle functions of , That is, the update phase shouldComponentUpdate Previous operations , Both can pass getDerivedStateFromProps With the help of !!

At the same time, a new life cycle function is introduced getSnapshotBeforeUpdate(prevProps, prevState): snapshot
This function will be in render After performing , And at the time of execution DOM The element has not been updated , Give a chance to get DOM Information , Calculate to get a snapshot( snapshot ), This snapshot Will act as componentDidUpdate The third parameter of the .

16.4 after
 Insert picture description here
The most obvious is getDerivedStateFromProps The action of prolongs , Directly across the whole mounting and updating Stage
Use a static function getDerivedStateFromProps To replace the deprecate Several life cycle functions of , Is to force developers to render Previously, only the operation without side effects was performed , And the operation that can be done is limited to props and state Decide new state

Reference material :
What this big guy wrote is very good !

copyright notice
author[A programmer who can only write bugs],Please bring the original link to reprint, thank you.

Random recommended