react生命周期(新)

react的生命周期阶段

1. react分为挂载，更新以及卸载的阶段。

第一次挂载的时候

• 先从constructor — getdDeruvedStateFromProps-- render- componentDidMount

     class Car extends React.Component {
        constructor (props) {
          super(props)
          console.log('我是constructor')
          this.state = {
            person: {
              name: '小明'
            }
          }
        }
       static getDerivedStateFromProps (props, state) {
        // 接收两个属性
        console.log('我是getDerivedStateFromProps')
        return {
          person: {  // 直接覆盖state，并且值改变的时候并不会重新刷新
              age: 19
            }
        }
        }
        render() {
          console.log('我是render')
          return (
            <div>
              <h1>我是{this.state.person.age}组件</h1>
            </div>
          )
        }
        componentDidMount () {
          console.log('组件更新完毕')
        }
      }
      // 执行结果 我是constructor
      //  我是getDerivedStateFromProps 
	// 我是render
 	// 组件更新完毕

更新的时候(当props改变，调用setState，forceUpdate)

• getDerivedStateFromProps — shouldComponentUpdate --render – getSnapshotBeforeUpdate — componentDidUpdate

      class Car extends React.Component {
        constructor (props) {
          super(props)
          console.log('我是constructor')
          this.state = {
            person: {
              name: '小明'
            }
          }
          this.add = this.add.bind(this)
        }
        add () {
          this.setState({
            person: {
              name: '小花'
            }
          })
        }
       static getDerivedStateFromProps (props, state) {
        // 接收两个属性
        console.log('我是getDerivedStateFromProps', state)
        // return {
        //   person: {  // 直接覆盖state，并且值改变的时候并不会重新刷新
        //       age: 19
        //     }
        // }
        return null
        }
        shouldComponentUpdate() {
          console.log('我是shouldComponentUpdate')
          return true // 如果返回的是false将不会更新，默认返回的是true
        }
        render() {
          console.log('我是render')
          return (
            <div>
              <h1 onClick={this.add}>我是{this.state.person.name}组件</h1>
            </div>
          )
        }
        getSnapshotBeforeUpdate (props, state) {
           // 保存更新前的props, state
            console.log('我是 getSnapshotBeforeUpdate')
            return '我是保存的快照'
          }
        componentDidUpdate (props, state, snapshot) {
        // 保存更新前的props, state， snapshot为 getSnapshotBeforeUpdate的返回值
          console.log('我是componentDidUpdate')
        }
        componentDidMount () {
          console.log('组件更新完毕')
        }
      }
 // 执行结果： 
 // 我是constructor
 // 我是getDerivedStateFromProps
 // 我是render
 // 组件更新完毕
 // 我是getDerivedStateFromProps
 //  我是shouldComponentUpdate
//  我是render
//  我是 getSnapshotBeforeUpdate
//  我是componentDidUpdate

组件卸载的时候

      class Car extends React.Component {
        constructor (props) {
          super(props)
          console.log('我是constructor')
          this.state = {
            person: {
              name: '小明'
            }
          }
          this.add = this.add.bind(this)
          this.cancel = this.cancel.bind(this)
        }
        add () {
          this.setState({
            person: {
              name: '小花'
            }
          })
        }
        cancel () {
          ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
        }
       static getDerivedStateFromProps (props, state) {
        // 接收两个属性
        console.log('我是getDerivedStateFromProps')
        // return {
        //   person: {  // 直接覆盖state，并且值改变的时候并不会重新刷新
        //       age: 19
        //     }
        // }
        return null
        }
        shouldComponentUpdate() {
          console.log('我是shouldComponentUpdate')
          return true // 如果返回的是false将不会更新，默认返回的是true
        }
        render() {
          console.log('我是render')
          return (
            <div>
              <h1 onClick={this.add}>我是{this.state.person.name}组件</h1>
              <button onClick={this.cancel}>卸载组件</button>
            </div>
          )
        }
        getSnapshotBeforeUpdate (props, state) {
           // 保存更新前的props, state
            console.log('我是 getSnapshotBeforeUpdate')
            return '我是保存的快照'
          }
        componentDidUpdate (props, state, snapshot) {
        // 保存更新前的props, state， snapshot为 getSnapshotBeforeUpdate的返回值
          console.log('我是componentDidUpdate')
        }
        componentDidMount () {
          console.log('组件更新完毕')
        }
        componentWillUnmount () {
          console.log('组件卸载！')
        }
      }