React入门(四) React的生命周期和节点

本节知识点

(1) 获取到元素的节点。
(2) React的生命周期

(1) 在react中要想获取到元素节点有两种方式

(i)第一种e.target
例如

<button onClick="this.change.bind(this)">点击我</button>
//然后在方法里面可以直接e.target获取到元素

(ii)第二种通过ref

        <input
          value={this.state.value2}
          onChange={this.change.bind(this)}
          ref={input1 => {
            //input1表示整个dom
            //this.inputid 表示别名
            this.inputid = input1
          }}
        />

然后在使用的时候就是

e.target.value 等价于 this.inputid.value
可以直接使用了

(2) React 的生命周期

先说一下REACT的步骤
(1) componentWillMount(){}
(2) componentDidMount(){}

这里要说明（3）返回的是个布尔值。要是false的话同级之间数据变化他不会更新DOM的，要是true的话他会更新的。但是要是父级传递过来的数据变化了，那他渲染的时候还是会渲染的

(3) shouldComponentUpdate(){}
(4) componentWillUpdate(){}
(5) componentDidUpdate(){}

(6)父元素给子元素传值的时候，值改变时候会触发，第一次不触发

(6) componentWillReceiveProps(){}

(7) 组件被移除的时候

(7) componentWillUnmount(){}

PS:性能优化

shouldComponentUpdate(nextProps,nextState){
 if(nextProps.content!==this.props.content){
      return true;
  }else{
   return false
  }
}

一般情况下获取数据的话，都写在

componentDidMount(){}