对比Vue学习react生命周期

1.Vue中mounted等于React中的componentDidMount,另外beforeMounted相当于componentWillMount(这个方法将要被移除)，现在版本（react 16.X.X）,应该使用UNSAFE_componentWillMount:

UNSAFE_componentWillMount() {
  console.log(`这是组件的willMount.....`)
}

2.在Vue中需要watch监控变量来改变数据、操作dom等。
而react中，页面state或props发生变化时就会执行render中的内容。

3.关于updated,这个要特别的注意，react中有一个shouldComponentUpdate这个函数会在更新之前执行，用于判断组件是否需要更新，若return的值为false则组件不会更新，若return为true则更新组件。实例如下：

shouldComponentUpdate(){
  console.log('shouldComponentUpdate---组件发生改变前执行')
  # 注意！！！为true则更新 为false则不更新
  return true
}

4.上面的执行完毕，接下来会执行componentWillUpdate:

//shouldComponentUpdate返回true才会被执行。
componentWillUpdate(){
  console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
}

5.然后将会执行的是componentDidUpdate：

componentDidUpdate(){
  console.log('componentDidUpdate----组件更新之后执行')
}

这里特殊说明一下一个函数：componentWillReceiveProps（同样的将在新版本的react中被移除）现在版本（16.X.X）使用UNSAFE_componentWillReceiveProps，这个函数是收到props的时候执行，也就是说这个组件第一次存在于Dom中，函数是不会被执行的，如果已经存在于Dom中，函数才会被执行：

UNSAFE_componentWillReceiveProps(){
 console.log('child - componentWillReceiveProps')
}

6.最后的一个生命周期函数componentWillUnmount:
这个函数是在组件被销毁的阶段执行的，等于Vue中beforeDestory:

componentWillUnmount(){
  console.log('child - componentWillUnmount')
}

全部的实例代码如下：

import React, { Component, Fragment} from 'react';
import TaskItem from './components/taskItem';
import './App.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      title: 'to do list',
      tasksList: [],
      enterMsg: false
    }
  }

  componentWillMount() {
    console.log(`这是组件的willMount.....`)
  }

  componentDidMount() {
    console.log(`这是组件的didMount.....`)
  }

  shouldComponentUpdate(){
    console.log('shouldComponentUpdate---组件发生改变前执行')
    return true
  }

  componentWillUnmount(){
    console.log('child - componentWillUnmount')
  }

  componentDidUpdate(){
    console.log('componentDidUpdate----组件更新之后执行')
  }

  render() { 
    console.log(`render.....`)
    let enterMsg;
    if(this.state.enterMsg) {
      enterMsg = <TaskItem confirm={this.callback.bind(this)} cancel={this.receiveCancel.bind(this)} />
    } else {
      enterMsg = <p/>
    }
    return ( 
      <Fragment>
        <ul>
          {
            this.state.tasksList.map((item, index) => {
              return <li key={index}>{`第${index +1}个任务：${item}`} 
                <span>
                  <button onClick={this.completeTask.bind(this, index)}>完成了</button>
                </span>
              </li>
            }) 
          }
        </ul>
        <button onClick={this.addTask.bind(this)}>新建任务</button>
        <div className="taskDetail">
          {enterMsg}
        </div>
      </Fragment>
    );
  }

  addTask() {
    this.setState({
      enterMsg: true
    })
  }

  receiveCancel(flag) {
    if (!flag) {
      this.setState({
        enterMsg: false
      })
    }
  }

  callback(msg) {
    const tempList = [...this.state.tasksList, msg]
    this.setState({
      tasksList: tempList
    })
  }

  completeTask(index) {
    const tempList = this.state.tasksList;
    tempList.splice(index,1);
    this.setState({
      tasksList: tempList
    })
  }
}
 
export default App;

TaskItem组件的代码：

import React, { Component, Fragment } from 'react';
import './taskItem.css';

class TaskItem extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            task: ''
        }
    }

    componentWillReceiveProps(){
        console.log('child - componentWillReceiveProps')
    }

    render() { 
        return (
            <Fragment>
                <input placeholder="输入任务内容" value={this.state.task} onChange={this.handleChange.bind(this)}/>
                <div>
                    <button onClick={this.genTask.bind(this)}>确认</button>
                    <button onClick={this.clearTask.bind(this)}>取消</button>
                </div>
            </Fragment>
        );
    }

    genTask() {
        this.props.confirm(this.state.task)
    }

    clearTask() {
        this.setState({
            task: ""
        })
        this.props.cancel(false)
    }

    handleChange(e) {
        this.setState({
            task: e.target.value
        })
    }
}
 
export default TaskItem;