React 学习笔记：生命周期函数及应用场景（六）

React中生命周期函数的运行顺序：

1、componentWillMount------------组件将要被渲染；

2、render-------------------------------渲染函数，组件就可以添加页面；

3、componentDidMount------------件渲染完成，进入运行状态，只运行一次；

4、componentWillReceiveProps--当props发生改变时，触发次函数；

5、ShouldComponentUpdatee----此函数功能是：是否允许组件方式状态改变，返回true是允许；返回false是不允许；

6、componentWillUpdate----------组件将要发生改变；

7、render-------------------------------渲染函数，这时是更新页面；

8、componentDidUpdate-----------组件更新完成；

9、componentWillUnmount--------组件卸载；

      在react中，我们在处理数据和视图的时候，要注意清除副作用；componentWillUnmount组件能够在被销毁之前清除掉以下三种情况的事件：

  ①事件监听（比如：滚动事件-------一直被监听的事件）；

  ②网络请求；

  ③定时器；

  eg：

       window.onscroll = () => {
            // 获取文档流高度
            // getBoundingClientRect
            if(timer){
              clearTimeout(timer);  
            }
            timer = setTimeout(() => {
                if(this.load.current.getBoundingClientRect().top < winHeight){
                    this.props.onLoadMoreHandler();
                }   
            },100)
        }

      此onscroll中，滚动事件一直被触发，将此事件清除，可以在componentWillUnmount（）函数中将window.onscroll 赋值为null；或者直接将此事件干掉；

    componentWillUnmount(){
        // 事件清除
        window.onscroll = null;
    }