react入门（七）——组件的生命周期

组件的生命周期是什么？

 组件的生命周期说白了，就是组件在每个阶段的回掉函数，比如render。大家回忆一下，我们些react的时候调用了render方法？没有，是react内部自己调用了。所以说，组件就是类似于render方法的函数。

组件的生命周期有哪些？

 这张图我们，我来给大家梳理以下，因为常用的基本上就只有这些

• constructor
   构造器，这是最先执行的，当你刷新页面之后第一个执行且只能执行一次，即创建对象。
• componentWillMount
   这个生命周期函数，译为组件即将挂载，在组件的整个生命周期中只执行一次，在这里我们可以发送ajax请求，设置状态数据
• render
   这个生命周期函数，译为渲染，在组件的整个生命周期执行多次，在这个函数执行的时候就是挂载虚拟和渲染dom的时候。只要状态state发生改变，就会重新渲染页面，执行render方法。
• componentDidMount
   在这个生命周期函数译为组件已经完成挂载，这个时候虚拟DOM已经挂载到了真实的dom上了
• componentWillReceiveProps
   这个生命周期函数译为组件即将接受（新的）属性，他有两个参数nextProps（新的属性）, nextContext（新的上下文），不过我们径常用的就只有前面第一个参数。
• shouldComponentUpdate
   这个生命周期函数译为是否进行组件的更新（一定要返回一个boolean类型的变量），接收三个参数nextProps（新的props）, nextState（新的state）, nextContext（新的上下文），我可以很放心的告诉大家，这个组件10次用不到1次
• componentWillUpdate
   这个函数和上一个函数参数相同，用来对组件的state进行更新的，用的不是那么频繁
• componentDidUpdate
   这个生命周期函数译为组件完成更新，接收三个参数prevProps（旧的props）, prevState（旧的state）, snapshot（快照），这个函数基本上用的频率也不高
• componentWillUnmount
   这个生命周期函数译为组件即将卸载，这个函数基本上用的次数比较频繁，在这个生命周期中，我们可以用来清理定时器等以后不用且占用空间的数据。另外reacDOM提供了一个用于卸载组件的实例方法（注意：这里的卸载不是指display:none，而是真正的从dom中删除）

 ReactDOM.unmountComponentAtNode(document.getElementById('test')) //卸载组件

举个例子

 这里我们采用计时器的方式来进行效果的演示，那么问题来了什么时候设置计时器呢？，我的回答是组件渲染之后就设置，即在生命周期函数componentDidMount里设置。

<script type="text/babel">
    /**
     * 需求：自定义组件
     * 1. 让指定的文本做显示/隐藏的动画
     * 2. 切换时间2s
     * 3. 点击按钮从界面中移除组件动画
     */
    class Life extends React.Component {
        constructor() {
            super();
            this.state = {
                opacity: 1,
                timer: null
            }

        }
        /**
         * 组件挂在完成之后调用该函数
         * */
        componentDidMount() {
            //启动循环定时器
            let {opacity} = this.state;
            this.state.timer = setInterval(() => {
                opacity -= 0.1;
                if (opacity <= 0) {
                    opacity = 1
                }
                this.setState({
                    opacity
                })
            }, 200)
        }

        clearComponent() {
            //reactDom提供了一个卸载组件的方法
            ReactDOM.unmountComponentAtNode(document.getElementById('test')) //卸载组件
        }

        /**
         * 这个回掉函数用于卸载定时器等
         */
        componentWillUnmount() {
            clearInterval(this.state.timer);
        }

        render() {
            let {opacity} = this.state;
            //外围大括号表示要写js代码
            //里面的大括号表示要写js对象
            return (
                <div>
                    <h2 style={{opacity}} ref={el => this.h2 = el}>{this.props.msg + ' ' + this.props.children}</h2>
                    <button onClick={() => {
                        this.clearComponent()
                    }}>不活了
                    </button>
                </div>
            )
        }
    }
    ReactDOM.render(<Life msg="react太难了，怎么办"></Life>, document.getElementById('test'))
</script>

 希望通过以上的例子，各位能够理解组件的生命周期，以及他们的使用方法和使用时机。