React js学习手记：生命周期

组件本质上是状态机，输入确定，输出确定。
组件三个阶段 ：初始化-运行中-销毁
初始化阶段
可以用 constructor(props) 来构造
componentWillMount 组件即将渲染到页面上
render组件渲染虚拟dom阶段（只能访问this.props this.state）不允许修改状态和dom输出
componentDidMount 组件渲染后调用 可以修改dom 只有在render渲染后才能修改真的dom

运行中阶段
componentWillReceiveProps 接受到属性之前触发(父组件修改属性出发，可以修改新属性，修改状态)
shouldComponentUpdate 当组件接收到属性后更新（是否更新）返回false会阻止render调用
componentWillUpdate 更新 不能修改属性和状态
render 同初始化
componentDidUpdate 更新后调用可以修改dom

销毁
componentWillUnmount 给开发者机会，在销毁时清理数据,如计时器等

首先创建了TestM组件，为了测试 运行中 的生命周期和销毁的生命周期
如下

/**
 * Created by H2 on 2016/11/8.
 */
import React, { Component } from 'react';

class TestM extends Component {

    componentWillUnmount(){
        console.log("componentWillUnmount 154124515")
    }
    componentWillReceiveProps(){
        console.log("componentWillReceiveProps 1");
    }
    shouldComponentUpdate(){
        console.log("shouldComponentUpdate 2");

        return true
    }
    componentWillUpdate(){
        console.log("componentWillUpdate 3");

    }
    render(){
        console.log("render 4");

        return <p>Hello,{this.props.name}</p>
    }
    componentDidUpdate(){
        console.log("componentDidUpdate 5");

    }
}

export default TestM;

继续创建主要入口app.js

class App extends Component {
    getName() {
        if(this.props.name){
            return this.props.name
        }else {
            return "hehehda";
        }
    }
    constructor(props) {
        super(props);
        this.state = {name: "张小张"};
        this.handleChange = this.handleChange.bind(this)
    }
    //React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现，如下：
    //getDefaultProps(){
    //    console.log("getDefaultProps 1")
    //}
    //
    //getInitialState(){
    //    console.log("getInitialState 2")
    //    return null
    //}

    componentWillMount(){
        console.log("componentWillMount 3")
    }

    componentDidMount(){
        console.log("componentDidMount 5")
    }

    handleChange(event){
        this.setState({
            name:event.target.value
        });

    }
  render() {
      console.log("render 4")
      if(this.state.name  == "123"){
          return <div>123</div>
      }
      return (
    <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2 ref="123www"
          //ewrew
          >Welcome to React {this.getName()} 123s45{
          /**
           * dswew
           */
          }</h2>
            <h2>It is {this.state.name}.</h2>
        </div>
          //嵌入内部html
          <div dangerouslySetInnerHTML={rawHTML}>
          </div>
        <p className="App-intro">
          To get ssstarted, edit 22<code>src/App.js</code> and save to reload.
        12
        </p>
          //key同一个组件不能相同，提高访问性能
          <ul>
              <li key="1">1</li>
              <li key="2">2</li>
              <li key="3">3</li>
          </ul>
        <TestM name={this.state.name}></TestM>
        <input type="text" onChange={this.handleChange}/>
      </div>
    );
  }
}

export default App;