React生命周期

Each component has several "lifecycle methods" that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens. --- React官方文檔

掛載

初始化過(guò)程如下:

• constructor
• componentWillMount
• render
• componentDidMount

更新

當(dāng)父組件給子組件傳值時(shí)在张，會(huì)觸發(fā)如下更新過(guò)程:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

卸載

當(dāng)一個(gè)組件被從DOM中移除時(shí)砚嘴，該方法別調(diào)用:

• componentWillUnmount

具體加載過(guò)程參考如下圖:

image

具體代碼

1. 掛載
   先來(lái)說(shuō)說(shuō)掛載的流程，該流程從 constructor -> componentDidMount 胰蝠。
   當(dāng)該組件第一次創(chuàng)建時(shí)权逗，會(huì)執(zhí)行該過(guò)程。整個(gè)過(guò)程只執(zhí)行一次，具體代碼如下:

       class CycleLife extends React.Component {
           // 掛載過(guò)程
           // 1.構(gòu)造器函數(shù)
           constructor(props) {
               super(props);
               console.log('構(gòu)造器函數(shù)');
           }
           // 2.組件將要掛載
           componentWillMount() {
               console.log('組件將要被掛載');
           }
           // 3.組件渲染
           render() {
               console.log('組件被渲染');
               return (
                   <h1>Hello, World</h1>
               );
           }
           // 4.組件已經(jīng)掛載
           componentDidMount() {
               console.log('組件已經(jīng)被掛載');
           }
       }
   

2. state 變更觸發(fā)更新

       class CycleLife extends React.Component {
           constructor(props) {
               super(props)
               this.state = {
                   time: new Date()
               }
           }
           changeTime = () => {
               this.setState({
                   time: new Date()
               })
           }
           componentDidMount() {
               // 每隔一秒修改時(shí)間, 實(shí)現(xiàn)時(shí)鐘效果
               setInterval(this.changeTime, 1000)
           }
           // 1. 判斷是否需要組件更新, 默認(rèn) true
           shouldComponentUpdate(nextProps, nextState) {
               // 返回 false 時(shí), 后續(xù)函數(shù)不執(zhí)行
               return true
           }
           // 2. 組件將要更新
           componentWillUpdate(nextProps, nextState) {
               console.log('nextProps: ', nextProps)
               console.log('nextState: ', nextState)
               console.log('組件將要被掛載')
           }
           // 3. 組件被重新渲染
           render() {
               console.log('組件被重新渲染')
               return (
                   <h1>{this.state.time.toLocaleString()}</h1>
               );
           }
           // 4. 組件已經(jīng)更新
           componentDidUpdate() {
               console.log('組件已經(jīng)被掛載')
           }
       }
       ReactDOM.render(
           <CycleLife/>,
           document.getElementById('root')
       );
   

3. 父 -> 子 傳遞屬性時(shí), 發(fā)生的生命周期

       class CycleLife extends React.Component {
           static propTypes = {
               content: React.PropTypes.string
           }
           constructor(props) {
               super(props)
           }
           // 1. 父 -> 子傳遞props時(shí), 觸發(fā)
           componentWillReceiveProps(nextProps, nextState) {
               console.log('組件屬性被父級(jí)修改')
               console.log('nextProps: ', nextProps)
               console.log('nextState: ', nextState)
           }
           // 2. 判斷是否需要組件更新, 默認(rèn) true
           shouldComponentUpdate(nextProps, nextState) {
               console.log('判斷組件是否需要更新')
               // 返回 false 時(shí), 后續(xù)函數(shù)不執(zhí)行
               return true
           }
           // 3. 組件將要更新
           componentWillUpdate(nextProps, nextState) {
               console.log('nextProps: ', nextProps)
               console.log('nextState: ', nextState)
               console.log('組件將要被掛載')
           }
           // 4. 組件被重新渲染
           render() {
               console.log('組件被重新渲染')
               return (
                   <h1>{this.props.content}</h1>
               );
           }
           // 5. 組件已經(jīng)更新
           componentDidUpdate() {
               console.log('組件已經(jīng)被掛載')
           }
       }
       class FatherComponent extends React.Component {
           constructor(props) {
               super(props)
               this.state = {
                   content: '生命周期展示'
               }
           }
           componentDidMount() {
               this.setState({
                   content: '生命周期展示被改變'
               })
           }
           render() {
               return (
                   <CycleLife content={this.state.content}/>
               )
           }
       }
       ReactDOM.render(
           <FatherComponent />,
           document.getElementById('root')
       );