3月13日日记【react lifecycle】

写得太早都不知道说些什么。

React

react 组件生命周期分别是（可能已经增加了，但是我不知道）：

componentWillMount()
componentDidMount()
componentWillReceiveProps(nextProps)
shouldComponentUpdate()
componentWillUpdate()
// render() 
// or componentDidCatch()
componentDidUpdate()
componentWillUnmount()
componentDidUnmount()

值得注意的是 componentWillMount 和 componentWillUnmount 是异步方法，这也就意味着组件的生命周期可能会以以下方式执行：
1.componentWillMount()
2.componentWillUnmount()
3.componentDidMount()

这里会引发一些问题，例如 在componentWillMount中使用异步方法，并且调用 component.setState 方法的话，大概率会接受到以下错误：

 can't perform a react state update on an unmounted component.

由于componentWillMount 和 componentWillUnmount在同时执行，而因为componentWillMount调用了异步方法，很大可能会造成阻塞，而当setState的时候componentWillUnmount执行完毕，导致组件没有被挂载即设置state，引发如上错误。

出现这个问题后， 我对React的组件声明周期产生了疑惑， react组件在挂载的时候会执行两次挂载方法，例如：
componentWillMount
componentDidMount
componentWillMount
componentWillUnmount
componentDidMount

可能是用于测试？ 搞不懂为什么， 有状态函数在注释掉 constructor 之后，依然是以这种形式出现， 也就是说是react的特性导致的以下特点。
因为组件会挂载两次，那么如果我们在componentDidMount执行异步函数的时候，就必须要判断组件是否被挂载：

in the component did mount
this._isMount = true;
...
this._isMount? this.setState({...}) : null // set state or do nothing

in the component will unmount 
...
this._isMount = false ;
...