React 学习笔记 —— 组件生命周期

生命周期汇总图

线路一

class Demo extends React.Component {
	// 实例化组件时执行
    constructor () {
        super()
        this.state = {
            count: 0
        }
        console.log('constructor')
    }
    handleAdd = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    handleUnmounted = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('app'))
    }
    // 将要挂载时执行
    componentWillMount () {
        console.log('componentWillMount')
    }
    // 渲染时执行
    render () {
        console.log('render')
        return (
            <div>
                <div>{this.state.count}</div>
                <button onClick={this.handleAdd}>+1</button>    
                <button onClick={this.handleUnmounted}>卸载</button>    
            </div>
        )
    }
    // 挂载完毕时执行
    componentDidMount () {
        console.log('componentDidMount')
    }
    // 将要卸载时执行
    componentWillUnmount () {
        console.log('componentWillUnmount')
    }
}


ReactDOM.render(<Demo />, document.getElementById('app'))

线路二

class Demo extends React.Component {
	constructor () {
		...
	}
	handleAdd = () => {
		...
	}
	handleUnmounted = () => {
		...
	}
	// 返回 true 时，后续的回调函数才有机会执行，相当于控制组件更新的‘阀门’
	shouldComponentUpdate() {
		console.log('shouldComponentUpdate')
		return true
	}
    componentWillMount () {
        console.log('componentWillMount')
    }
    // 组件将要更新时执行
    componentWillUpdate () {
        console.log('componentWillUpdate')
    }
    render () {
		...
    }
    // 组件更新完毕时执行
    componentDidUpdate () {
        console.log('componentDidUpdate')
    }
    componentDidMount () {
        console.log('componentDidMount')
    }
    componentWillUnmount () {
        console.log('componentWillUnmount')
    }
}


ReactDOM.render(<Demo />, document.getElementById('app'))

线路三

 class Demo extends React.Component {
     constructor () {
     	...
     }
     handleAdd = () => {
     	...
     }
     handleUnmounted = () => {
		...
     }
     shouldComponentUpdate() {
		...
     }
     componentWillMount () {
         console.log('componentWillMount')
     }
     componentWillUpdate () {
         console.log('componentWillUpdate')
     }
     render () {
         console.log('render')
         return (
             <div>
                 ...
                 // 调用 forceUpdate 强制更新，即 无需调用 setState 也会触发更新
                 <button onClick={()=>this.forceUpdate()}>强制更新</button>    
             </div>
         )
     }
     componentDidUpdate () {
         console.log('componentDidUpdate')
     }
     componentDidMount () {
         console.log('componentDidMount')
     }
     componentWillUnmount () {
         console.log('componentWillUnmount')
     }
 }


 ReactDOM.render(<Demo />, document.getElementById('app'))

线路四

class Parent extends React.Component{
    state = {
        count: 0
    }
    handleAdd = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    // 父组件执行 render
    render () {
        return (
            <div>
            	// 给子组件传递 props
                <Child count={this.state.count}/>
                <button onClick={this.handleAdd}>+1</button>
            </div>
            
        )
    }
}

class Child extends React.Component {
	// 子组件触发 ‘将收到 props 回调’ 
	// 需要注意的是，子组件第一次收到 props 时，不会触发该回调
	// 说起来叫 componentWillReceiveNewProps 或许更为贴切
    componentWillReceiveProps () {
        console.log('componentWillReceiveProps')
    }
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
    }
    componentWillUpdate () {
        console.log('componentWillUpdate')
    }
    render () {
        return (
            <div>
                {this.props.count}
            </div>
        )
    }
    componentDidUpdate () {
        console.log('componentDidUpdate')
    }
}
ReactDOM.render(<Parent />, document.getElementById('app'))

17版本的生命周期变动

• React 预计废弃这三个钩子：componentWillReceiveProps、componentWillMount、componentWillUpdate
• 在17版本中，这三个待废弃的钩子被重命名为：UNSAFE_componentWillReceiveProps、UNSAFE_componentWillMount、UNSAFE_componentWillUpdate
• 在17版本中，新增了两个钩子：getDerivedStateFromProps、getSnapshotBeforeUpdate

getDerivedStateFromProps

• 该方法意为 从props中获取派生的state
• 该方法为静态方法
• 该方法接收两个参数，参数1为props、参数2为state
• 该方法返回null，或者派生的state，页面渲染时，该派生的state 优先级高于 this.state
• 该方法横跨挂载和更新，可以在任何时候决定用于渲染视图的state
• 该方法用法罕见，仅当需要由props来决定state时，可能有用

class Demo extends React.Component {
    // 实例化组件时执行
    constructor () {
        super()
        this.state = {
            count: 0
        }
        console.log('constructor')
    }
    handleAdd = () => {
		...
    }
    handleUnmounted = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('app'))
    }
    static getDerivedStateFromProps (props, state) {
        console.log('getDerivedStateFromProps')
        return null
    }

    // 渲染时执行
    render () {
        console.log('render')
        ...
    }
    // 挂载完毕时执行
    componentDidMount () {
        console.log('componentDidMount')
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

• 如果返回一个派生的state，那么将以派生的为准

 static getDerivedStateFromProps (props, state) {
     console.log('getDerivedStateFromProps')
     return {count: 100}		// 仅修改此处
 }

getSnapshotBeforeUpdate

• 该方法意为在更新之前获取快照
• 该方法接收两个参数，参数1prevProps：之前的props，参数2prevState：之前的state
• 该方法的返回值，会传递给componentDidMount第三个参数
• componentDidMount的三个参数：(prevProps, prevState, snapshot)
• 通过该钩子，可以捕获一些更新前的数据，并传递给componentDidMount
• 同样是用法罕见的钩子