The difference between the old and new life cycles of react: 1. Three will hooks have been removed from the new life cycle, namely componentWillMount, componentWillReceiveProps, and componentWillUpdate; 2. Two new hooks have been added to the new life cycle, namely getDerivedStateFromProps (derived from props state) and getSnapshotBeforeUpdate.
The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.
React has two sets of life cycles before and after version 16.3. Before 16.3, it was the old version, and after that, it was the new version. Although there are old and new versions, they are basically the same.
React lifecycle (old)
It is worth emphasizing that the componentWillReceiveProps function will not be called when props are passed in for the first time. It will only be called when props are passed in after the second time (including the second time).
shouldComponentUpdate is like a valve and needs a return value (true or false) to determine whether the status of this update needs to be re-rendered.
React lifecycle (new)
The difference between the old and new life cycles of react
The new life cycle removes three will hooks, namely: componentWillMount, componentWillReceiveProps, componentWillUpdate
The new life cycle adds two new hooks, namely:
1. getDerivedStateFromProps: Get derived state from props
Accepts two parameters: props, state
Returns a state object or null, used to modify the value of state.
Usage scenario: If the value of state depends on props at any time, you can use getDerivedStateFromProps
2. getSnapshotBeforeUpdate: Get the snapshot before the update (you can get the data before the update)
Called before updating the DOM
Returns an object or null, and the return value is passed to componentDidUpdate
componentDidUpdate(): called after updating the DOM
Accepts three parameters: preProps, preState, snapshotValue
Use cases:
The p with a fixed height adds a new row regularly, so that when adding a new row, the height of the currently viewed row remains unchanged.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate usage scenarios</title><style>.list{width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Prepare a "container" --><div id="test"></div ><!-- Introduce react core library--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Introduce react -dom, used to support react to operate DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Introduce babel to convert jsx to js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel">class NewsList extends React.Component{ state = {newsArr:[]} componentDidMount(){setInterval(() => {//Get the original state const {newsArr} = this.state//Simulate a news const news = 'News'+ (newsArr.length+1)//Update status this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height} render(){return(<div className="list" ref="list"> {this.state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM. render(<NewsList/>,document.getElementById('test'))</script></body></html>illustrate:
In React v16.3, new life cycle changes are ushered in. The old life cycle is also used, but a deprecation warning can be seen on the console. It also reminds that three life cycle hooks will be deprecated, so try not to use them. Or you can add the prefix UNSAFE_ in front of it.