React 生命周期之详解-2

jsx编译过程

ReactDom.render (
<Heard />
document.getElementById('root')
)
编译后的代码
ReactDom.render（
  document.createElement(Heard,null)
  document.getElementById('root')
）
** 过程：我们把Heard组件给了createElement函数，函数返回相应的jsx元素传递给我的
ReactDom.render()让ReactDom把jsx元素转化成真正的dom元素插入到指定的容器中

** 组件的挂载： react.js将组件渲染，构建dom元素插入页面的过程称之为组件的挂载
react.js对于每个组件都有一个这样的过程：
初始化组件 -> 组件挂载页面过程
constructor -> render() -> 构建Dom元素插入到指定的容器中

** react组件让我们更加了解react组件的挂载过程插入了两个方法：
-> constructor()
-> componentWillMount()
-> render() ->构建dom元素插入到容器中
-> componentDidMount()
-> componentWillUnmount()//组件被隐藏的时候就是移除时调用；


### 组件总结：
** constructor：存放组件的初始状态 state
** componentWillMount 组件的启动，ajax请求，定时器的启动等
** componentWillUnmount 组件页面上的销毁，清除
** componentDidMount dom元素组件挂载成功，比如动画
** shouldComponentUpdate(nextProps, nextState) 控制组件是否重新渲染，返回false表示不渲染;
nextProps:props对象， nextState：state对象
    if (newState.num%5 === 0) {
                return true
    } else {
                return false
     }


** componentWillReceiveProps(nextProps) 子组件从父组件接收到新的props之前调用；（排除销毁组件）
父组件通过setState方法修改state状态，传递给子组件新的props在渲染之前调用
componentWillReceiveProps -> componentWillUpdate -> render - componentDidUpdate

** componentWillUpdate() 组件开始更新之前调用，就是调用setState方法后，会调用这个方法，
   然后在调用render方法重新渲染dom元素；
   
** componentDidUpdate() 组件重新挂载成功后调用; 
   componentWillUpdate -> render() -> componentDidUpdate()

案例

import React,{Component} from 'react';
 class App extends Component {
    constructor () {
        super()
        this.state ={
          content: '11111'
        }
        console.log('constructor1')
    }
    componentWillMount () {
        console.log('componentwillmount2')
    }
    componentDidMount () {
        console.log('componentdidmount4')
    }
    componentWillUpdate() {
      console.log('componentWillUpdate5')
    }
    componentDidUpdate () {
      console.log('componentDidUpdate6')
    }
    componentWillReceiveProps(nextProps) {
      console.log(nextProps)
      console.log('componentwillreceiveprops-child-props7')
    }
    componentWillUnmount () {
        // 即将从页面中删除,组件隐藏的时候执行这个方法
        console.log('componentwillunmount')
    }
    handleUpdate = () => {
      this.setState({
        content: '66666'
      })
    }
    render () {
        console.log('render3')
        //console.log(this.props.con)
        return (
            <div>
                 <h2>{this.state.content}</h2>
                 <button onClick={this.handleUpdate}>btn</button>
            </div>
        )
    }
}


class Index extends Component {
    constructor() {
      super()
      this.state = {
        isShowHeader: true,
        aa: '111'
      }
    }

    handleShowOrHide () {
      this.setState({
        aa: '2222',
        isShowHeader: !this.state.isShowHeader
      })
    }
    handleCick = () => {
      this.setState({
        aa: '2222'
      })
    }
    
    render () {
      return (
        <div>
          {this.state.isShowHeader ? <App con={this.state.aa}/> : null}
          <button onClick={this.handleShowOrHide.bind(this)}>
            显示或者隐藏标题
          </button>
          <button onClick={this.handleCick}>props</button>
        </div>
      )
    }
  }

export default Index