React组件生命周期和钩子函数的介绍

React生命周期

组件生命周期的执行次数是什么样子的？？？

• 只执行一次： constructor、componentWillMount、componentDidMount

• 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

• 有条件的执行：componentWillUnmount（页面离开，组件销毁时）

• 不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）

组件的生命周期执行顺序是什么样子的？？？

生命周期代码探究

class LifeCycle extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            person:{
                name:'fuhq',
                age: 18
            }
        }
        console.log('constructor()')
    }
    // 组件将要被挂载
    componentWillMount(){
        //console.log(this);
        console.log('componentWillMount() 组件将要被挂载')
        // 发送ajax请求, 开启定时器
        // 需要手动绑定改变this指向
        // setTimeout(function(){
        //     this.setState({
        //         person:{
        //             name:'yanggq',
        //             age: 19
        //         }
        //     })
        // }.bind(this), 1000)
        // 箭头函数更方便
        setTimeout(()=>{
            this.setState({
                person:{
                    name:'yanggq',
                    age: 19
                }
            })
        }, 2000)
    }
    // 组件挂载完毕
    componentDidMount(){
        console.log('componentDidMount() 组件挂载完毕')
        // 官方推荐在这个钩子里面发送请求
        // 发送ajax请求, 开启定时器
        setTimeout(()=>{
            // 卸载
            ReactDom.unmoutComponentAtNode(document.getElementById('example'))
        }, 4000)

        this.intervalId = setInterval(function(){
            console.log('setInterval()')
        }, 1000)
    }
    // 组件将要更新
    componentWillUpdate(){
        console.log('componentWillUpdate() 组件将要更新')
    }
    // 组件更新完毕
    componentDidUpdate(){
        console.log('componentDidUpdate() 组件更新完毕')
    }
    // 组件将要被卸载
    componentWillUnmount(){
        console.log('componentWillUnmount() 组件将要被卸载')
        // 做一些收尾工作，关掉定时器
        clearInterval(this.intervalId)
    }
    render(){
        console.log('render()')
        return (
            <div>{person.name}:{person.age}</div>
        )
    }               
}
React.render(<LifeCycle />, document.getElementById('example'));

控制台查看结果

总结起来如下图