React - 生命周期

React 组件的生命周期

组件的生命周期可分为3个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

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

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
比如，每当 Clock 组件第一次加载到 DOM 中，我们都想生成一个定时器，这在 React 中被称为【挂载】。
同样，每当 Clock 生成的 DOM 被移除时，我们也要清除定时器，这在 React 中称为【卸载】。

实现一个时间实时变化的实例：

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = { date: new Date() }
    }

    // 挂载
    componentDidMount() {
        this.timerID = setInterval(() => {
            this.tick()
        }, 1000)
    }

    // 卸载
    componentWillUnmount() {
        clearInterval(this.timerID)
    }

    tick() {
        this.setState({
            date: new Date()
        })
    }

    render() {
        return (
            <div>
                <h1>现在是：{this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}