react学习笔记

1、react生命周期函数

   constructor()//构造函数

   componentWillMount()//组件挂载开始之前，也就是在组件调用 render 方法之前调用。

   render()// 然后构造 DOM 元素插入页面

   componentDidMount()//组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
   //挂载的时候，React.js 会在组件的 render 之前调用 componentWillMount，在 DOM 元素塞入页面以后调用 componentDidMount

   shouldComponentUpdate(nextProps, nextState)//你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。

   componentWillReceiveProps(nextProps)//组件从父组件接收到新的 props 之前调用。

   componentWillUpdate()//组件开始重新渲染之前调用。

   componentDidUpdate()//组件重新渲染并且把更改变更到真实的 DOM 以后调用。

   // 即将从页面中删除
   componentWillUnmount()//组件对应的 DOM 元素从页面中删除之前调用。
   // 从页面中删除

总结：
1、我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；
2、在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；
3、一般来说，有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。
4、当父组件传递给子组件的数据变化时，在子组件中调用componentWillReceiveProps，并将新的值接收到子组件中使用。
5、组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。

2.react的setState操作是异步操作

  this.setState({isTrue:true});
  
   if (this.state.isTrue) {
      console.log('ssss');
   }
   //此时this.state.isTrue还不是true，因为setState还没操作完，值还不是最新值
   //如果要在setState方法后，直接取用更动后的state值，正确的使用方式，在官方文件中的说明，需要利用setState的第二传参，传入一个回调(callback)函式，改为像下面这样的代码:

    this.setState({isTrue:true}, function(){ console.log(this.state.isTrue) })
    //另一个方式则是用componentDidUpdate()这个生命周期方法，把确定state更新后要执行的代码放在里面，如下面的代码:

    componentDidUpdate(){
       console.log(this.state.isTrue)
    }