React：生命周期函数

生命周期钩子详解

定义：在特定的阶段，ne你刚刚自动执行的函数（方法）。

• componentWillMount ：在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

• componentWillReceiveProps :在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate :返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。

• componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate :在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount: 在组件从 DOM 中移除的时候立刻被调用。

class MyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        };
    }
    //通过componentDidMount 方法设置一个定时器，每隔1秒重新设置时间，并重新渲染：
    componentDidMount() {
        var oThis=this;
        clearInterval(this.timer);
​
        this.timer=setInterval(function() {
            oThis.setState({
                date: new Date()
            })
        }, 1000)
    }
    
    render(){
        return (
            <h2>{this.state.date.toLocaleTimeString()}</h2>
        );
    }
}

生命周期函数的使用

父组件的状态传递到子组件的属性中

class Content extends React.Component {
    //在渲染前调用,在客户端也在服务端
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    //在第一次渲染后调用，只在客户端
    componentDidMount() {
       console.log('Component DID MOUNT!')
    }
    //在组件接收到一个新的 prop (更新后)时被调用
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    }
    //在组件接收到新的props或者state时被调用
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    //在组件接收到新的props或者state但还没有render时被调用
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }
    //在组件完成更新后立即调用
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
    }
    //在组件从 DOM 中移除的时候立刻被调用
    componentWillUnmount() {
         console.log('Component WILL UNMOUNT!')
    }
  
    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}
​
class MyApp extends React.Component {
    constructor(props) {
        super(props);
        //声明状态
        this.state = {
            data: 0,
            isRender: true
        };
        
        this.setNewNumber = this.setNewNumber.bind(this);
        this.deleteDOM = this.deleteDOM.bind(this);
    }
    //改变状态值并传递到子组件
    setNewNumber() {
        this.setState({data: this.state.data + 1});
    }
    //删除子组件
    deleteDOM() {
        this.setState({isRender: false})
    }
    
    render() {
        return (
            <div>
                <button onClick={this.setNewNumber}>点我改变状态</button>
                <button onClick={this.deleteDOM}>点我删除子组件</button>
                { this.state.isRender ？ <Content myNumber={this.state.data} /> : null }
            </div>
        );
    }
}
​
ReactDOM.render(
    <div>
        <MyApp />
    </div>,
    document.getElementById('root')
);

 

 

在生命周期函数中使用计时器的用法

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行，所以，最好在这里设置计时器：

  componentDidMount() {
    this.timerID = setInterval(      () => this.tick(),      1000    );  }

 

接下来把计时器的 ID 保存在 this 之中（this.timerID）。

尽管 this.props 和 this.state 是 React 本身设置的，且都拥有特殊的含义，但是其实你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。

我们会在 componentWillUnmount() 生命周期方法中清除计时器：

  componentWillUnmount() {
    clearInterval(this.timerID);  }