react生命周期理解

react组件的生命周期：

1. 生命周期指的是组件从初始化开始到结束的过程 ， 或者是生命周期是描述react组件从开始到结束的过程。
2. 每个react组件都具有生命周期。
3. react都对组件通过生命周期给予的钩子函数进行管理。

钩子函数：

• 指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数，叫做钩子函数。通俗讲：一方面又变动。另一方面立马去处理
  。

react组件经历的总阶段：

1. mounted阶段 加载阶段 或者说初始化阶段 这个阶段组件由jsx转换成真实dom
2. update阶段 组件运行中阶段 或者更新阶段 当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段。
3. umount阶段 组件卸载阶段 这个一般是组件被浏览器回收的阶段。

初始化生命周期整体流程低版本：

1. getDefaultProps 取得默认属性
2. getInitialState 初始化状态
3. componentWillMount 即将进入dom
4. render 描画dom
5. componentDidMount 已经进入dom

初始化生命周期整体流程高版本：
（执行顺序就是1.2.3）

1. componentWillMount 即将进入dom
2. render 描画dom
3. componentDidMount 已经进入dom

• will和did都可以写交互，官方推荐did

class App extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <div>
            <h2 ref="tit">生命周期</h2>
          </div>
        );
      }
      componentWillMount() {
        console.log(this.refs.tit); //undefined
      }
      componentDidMount() {
        console.log(this.refs.tit); //<h2>生命周期</h2>
      }
    }
    ReactDOM.render(<App />, document.getElementById("out"));

具体的声明函数周期—运行中阶段 数据更新过程：

（运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况
）

1. 组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

 class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          info: ""
        };
      }
      render() {
        return (
          <div>
            <h2 ref="tit">父组件</h2>
            <button onClick={this.tap.bind(this)}>获取dom元素</button>
            <input type="text" ref="ipt" />
            <button onClick={this.send.bind(this)}>发送给子组件</button>
            <hr />
            <Child name={this.state.info} />
          </div>
        );
      }
      tap() {
        console.log(this.refs.tit.innerHTML);
      }
      send() {
        this.setState({
          info: this.refs.ipt.value
        });
      }
    }
    class Child extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <div>
            <div>子组件</div>
            <p>接收父组件发送的数据--{this.props.name}</p>
          </div>
        );
      }
      componentWillReceiveProps(a) {
        console.log(a); //也是跟(跟父传给子的值相关)
        //父组件接受子组件的参数时会触发
        console.log("componentWillReceiveProps"); //componentWillReceiveProps
      }
      shouldComponentUpdate(a) {
        //should函数不写的情况下，默认是允许更新
        console.log(a); //这个参数跟更新的数据值相关，当componentWillReceiveProps函数触发时，参数a值为{name: "111"}(跟父传给子的值相关)
        if (a.name == "hello") {
          //根据这个参数值可以做判断（可以避免不必要的更新）
          return true;
        } else {
          return false;
        }
        // return true;
        //false时 不允许视图更新 componentWillUpdate，componentDidUpdate不会触发
      }
      componentWillUpdate() {
        console.log("componentWillUpdate"); //componentWillUpdate 当点击事件触发状态被修改时触发
      }
      componentDidUpdate() {
        console.log("componentDidUpdate"); //componentDidUpdate 当点击事件触发状态被修改时触发
      }
    }
    ReactDOM.render(<App />, document.getElementById("out"));
    // 父组件-子组件：
    // 在子组件标签上绑定属性名，值为父组件需要传递的状态值，子组件内部通过this.props.name接收。

2. 组件是否更新 shouldComponentUpdate （影响整个项目的性能，决定视图的更新）
3. 组件即将更新componentWillUpdate
4. 必不可少的render
5. 组件更新完毕时运行的函数 componentDidUpdate

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          str: "hello"
        };
      }
      render() {
        return (
          <div>
            <h2 ref="tit">生命周期</h2>
            <p>{this.state.str}</p>
            <button onClick={this.tap.bind(this)}>修改S</button>
          </div>
        );
      }
      tap() {
        this.setState({ str: "nihao" });
      }
      componentWillMount() {
        console.log(this.refs.tit); //undefined
      }
      componentDidMount() {
        console.log(this.refs.tit); //<h2>生命周期</h2>
      }

      componentWillReceiveProps() {
        //父组件接受子组件的参数时会触发
        console.log("componentWillReceiveProps");
      }
      shouldComponentUpdate(a) {
        //should函数不写的情况下，默认是允许更新
        console.log(a); //这个参数跟更新的数据值相关
        return true;
        //false时 不允许视图更新 componentWillUpdate，componentDidUpdate不会触发
      }
      componentWillUpdate() {
        console.log("componentWillUpdate"); //componentWillUpdate 当点击事件触发状态被修改时触发
      }
      componentDidUpdate() {
        console.log("componentDidUpdate"); //componentDidUpdate 当点击事件触发状态被修改时触发
      }
    }
    ReactDOM.render(<App />, document.getElementById("out"));

销毁时 componentWillUnmount

• 卸载组件 ReactDOM.unmountComponentAtNode(‘节点’)

<button onClick={this.tap1.bind(this)}>销毁</button>

tap1() {
        ReactDOM.unmountComponentAtNode(document.getElementById("out"));
        //组件完全被浏览器回收，清空
      }