生命周期函数指在某一个时刻组件会自动调用执行的函数,React的生命周期函数主要有
- Initialization(初始化)
- Mounting(挂载)
- Updation(更新)
- Unmounting(卸载)
父组件
// 在组件即将被挂载到页面的时刻自动执行,挂载完毕不再执行 componentWillMount() { console.log('componentWillMount') } render() { console.log('parent render'); return //JSX }// 组件被挂载到页面之后,自动被执行,挂载完毕不再执行 componentDidMount() { console.log('componentDidMount') } // 组件被更新之前,自动被执行 shouldComponentUpdate() { console.log('shouldComponentUpdate') return true; } // 组件被更新之前,它会自动执行,但是它在shouldComponentUpdate之后执行 // 如果shouldComponentUpdate返回true它才执行 // 返回false,这个函数就不会被执行了 componentWillUpdate() { console.log('componentWillUpdate') } // 组件更新完成之后自动被执行 componentDidUpdate() { console.log('componentDidUpdate') }
子组件
// 一个组件从父组件接收了参数 // 如果这个组件第一次存在于父组件中,不会执行 // 如果这个组件之前已经存在于父组件中,才会执行 componentWillReceiveProps() { console.log('child componentWillReceiveProps') } // 当这个组件即将被从页面中剔除的时候,会被执行 componentWillUnmount() { console.log('child componentWillUnmount') }