React学习笔记③

生命周期的理解

class App extends Component{
  constructor(){//1
    console.log("constructor")
    //初始化属于组件的属性
    super();
    this.state = {
      num:1
    }
  }
  changehandler(e){
    this.state.num = e.target.value
    this.setState({
      num:e.target.value
    });
  }
  componentWillMount(){//2
    //不推荐在此处渲染数据，可能会阻塞
    console.log("componentWillMount")
  }
  componentDidMount(){//4
    console.log("componentDidMount")
  }
  shouldComponentUpdate(){//1 问该不该更新return true；则就是1
    console.log("shouldComponentUpdate")
  }
  componentWillUpdate(){//2 问shouldComponentUpdate该不该更新return true；则就是2(更新之前)
    console.log("componentWillUpdate")
  }
  componentDidUpdate(){//4问shouldComponentUpdate该不该更新return true；则就是4(更新之后)
    //数据改变的时候
    console.log("componentDidUpdate")
  }
  render(){//3 问shouldComponentUpdate该不该更新return true；则就是3
    return(
      <div>
        {this.state.num}
        <hr></hr>
        <input type='text' value={this.state.num} onChange={(e)=>{this.changehandler(e)}}></input>
      </div>
    )
  }
}
export default App;

第一种

constructor，

componentWillMount

render

componentDidMount第二种（有数据更新时）

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate以上是常用的生命周期执行顺序

来源：https://www.cnblogs.com/zhangxiaoqiong/p/10728939.html