React 入门学习笔记整理（七）—— 生命周期

（1）react 生命周期

只有类组件有生命周期，函数组件没有生命周期

1、挂载阶段：这些方法会在组件实例被创建和插入DOM中时被调用：

1）constructor(props)

初始化组件的状态、绑定方法，可以在构造函数中完成。

注意：状态不会随着属性的更新而更新。为了保证属性和状态同步，通常需要状态提升。

2） static getDerivedStateFromProps(nextProps, prevState)

组件实例化和接收新属性时将会getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态。

注意：如果父组件导致组件的重新渲染，即使属性没有更新，这一方法也会被调用。如果只想处理变化，需要去比较新旧值

3）componentWillMount()

在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。

4）render()

5）componentDidMount()

组件挂载到DOM之后执行，且只会被调用一次。

在这个方法中调用setState()将会触发一次额外的渲染，但是它将在浏览器刷新屏幕之前发生。这保证了即使render()将会调用两次，但用户不会看到中间状态。谨慎使用这一模式，因为它常导致性能问题。然而，它对于像模态框和工具提示框这样的例子是必须的。这时，在渲染依赖DOM节点的尺寸或者位置的视图前，你需要先测量这些节点。

2、更新阶段：属性或状态的改变会触发一次更新

1）componentWillReceiveProps(nextProps)

在装载的组件接收到新属性前调用

若你需要更新状态响应属性改变（例如，重置它），可能你需对比this.props状语从句：nextProps并在该方法中使用this.setState()处理状态改变。

注意即使属性未有任何改变，可能也会调用该方法，因此若你想要处理改变，请确保比较当前和之后的值。这可能会发生在当父组件引起你的组件重新渲染。

2） static getDerivedStateFromProps()

3）shouldComponentUpdate(nextProps, nextState)

当接收到新属性或状态时，shouldComponentUpdate()在渲染前被调用。默认为true。方法该不会并在初始化渲染或当使用forceUpdate()时被调用。

当前，若shouldComponentUpdate()返回false，而后componentWillUpdate()，render()和componentDidUpdate()将不会被调用

4）componentWillUpdate(nextProps, nextState)

当接收到新属性或状态时，componentWillUpdate会在渲染前被调用。

注意：不能再这里调用this.State()，若你需要更新状态响应属性的调整，使用getDerivedStateFromProps()代替。

若shouldComponentUpdate()返回false，componentWillUpdate将不会被调用。

5）render()

6）getSnapshotBeforeUpdate()

在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们，这一生命周期返回的任何职将会作为参数被传递给componentDidUpdate()

7）componentDidUpdate()

该方法会在更新发生后立即被调用。初始化时不会渲染。

当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方，要是你对比了当前属性和之前属性（例如，如果属性没有改变那么请求也就没必要了）。

注意：若shouldComponentUpdate()返回false，componentDidUpdate()将不会被调用。

3、销毁阶段

1）componentWillUnmount()

componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。

2）componentDidCatch(error, info)

错误边界是React组件，并不是损坏的组件树。错误边界捕捉发生在子组件树中任意地方的JavaScript错误，打印错误日志，并且显示回退的用户界面。错误边界捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误。

如果定义了这一生命周期方法，一个类组件将成为一个错误边界。在错误边界中调用setState()让你捕捉当前树之下未处理的JavaScript错误，并显示回退的用户界面。只使用错误边界来恢复异常，而不要尝试将它们用于控制流。

（2）基于回调的组件交流

import React, { Component } from 'react';

function Send(props){
    return (
        <div>
            <button onClick={props.changeMsg}>发送消息</button>
        </div>
    )
}
function Receive(props){
    return (
        <div>
            <p style={{display:'inline-block'}}>接收消息:</p>
            <p style={{
                display:'inline-block',
                marginLeft:20
            }}>{props.msg}</p>
        </div>
    )
}
function Input(props){
    return (
        <input type="text" ref={props.getInput}/>
    )
}

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg:'天气好',
            sunInput:''
        }
    }
    changeMsg=()=>{
        this.setState({
            //this.sunInput是获取Input节点
            msg:this.sunInput.value
        })
    }
    render() {
        return (
            <div className="App">
                <Input getInput={el=>this.sunInput=el} />
                <Receive msg={this.state.msg}></Receive>
                <Send changeMsg={this.changeMsg}></Send>
            </div>
        );
    }
}

export default App;