React-17: The life cycle of components

Uninstall components

 ReactDOM.unmountComponentAtNode(document.querySelector('.test'));

The component is mounted

componentDidMount() {
    
    
    this.timer = setInterval(() => {
    
    
        let {
    
    opacity} = this.state;
        opacity = opacity - 0.1;
        if (opacity <= 0) opacity = 1;
        this.setState({
    
    opacity:opacity})
    },200)
}

Component will be uninstalled

// 组件将要被卸载
componentWillUnmount() {
    
    
    clearInterval(this.timer)
}

Cycle timer

this.timer = setInterval(() => {
    
    
    let {
    
    opacity} = this.state;
    opacity = opacity - 0.1;
    if (opacity <= 0) opacity = 1;
    this.setState({
    
    opacity:opacity})
},200)

Component mounting process

1. Constructor
2. About to mount
3. render
4. Mounted
   

setState update process

forceUpdate process

• Mandatory update is not restricted by the valve shouldComponentUpdate, because this function is not used.
  

Parent component render process

• componentWillReceiveProps (the hook function that the component will receive new parameters). This hook function will not be triggered when the default parameters are passed in, and will only be triggered when new parameters are passed in.
  

Component life cycle (old)

In the new version, except for componentWillUnmount, the rest need to be added UNSAFE_

Component life cycle (new)

What is the difference between the old and new life cycles?

• In the new life cycle, the 3 hooks with will of the old version were discarded, and 2 hooks were newly proposed.

getDerivedStateFromProps

• Static should be added in front of this function because it is static.
• The state modified by this hook depends on props at any time, and other functions cannot be modified.
• As long as this hook is blocked, all states have to listen to props.

getSnapshotBeforeUpdate works with componentDidUpdate

Use scenarios of getSnapshotBeforeUpdate

Requirement: Make a news scroll box, the newly rendered news is always on it, the scroll bar stops at a position, and the news in this position is fixed and displayed to the user.

• First, clarify two concepts: scroolHeight refers to the total height of the current scrolling box, and scrollTop refers to the height of the jump from the bottom of the box .

class NewsList extends React.Component {
    
    
    state = {
    
     newsArr: [] };

    componentDidMount() {
    
    
        setInterval(() => {
    
    
            const {
    
     newsArr } = this.state;
            const news = "新闻" + (newsArr.length + 1);
            this.setState({
    
     newsArr: [news, ...newsArr] });
        }, 900)
    }
    getSnapshotBeforeUpdate() {
    
    
        // 返回当前list盒子的高度
        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((value,index) => {
    
    
                        return (
                            <div key={
    
    index} className="news">{
    
    value}</div>
                        )
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(<NewsList />, document.querySelector('.test'));

Summary: The life cycle of a component

• The key to the life cycle of a component is to understand the sequence of processes in the diagram of the new component life cycle.