componentWillMount VS componentDidMount

前言

这与React组件的生命周期有关，组件挂载时有关的生命周期有以下几个:

constructor(){}

componentWillMount(){}

render(){}

componentDidMount(){}

上面这些方法的调用是有次序的，由上而下，也就是当说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。

componentWillMount VS componentDidMount

constructor

被调用是在组件准备要挂载的最一开始，所以此时组件尚未挂载到网页上。

componentWillMount方法

• 将要装载，调用在constructor之后，在render之前，
• 每一个组件render之前立即调用
• 可以在服务端被调用，也可以在浏览器端被调用
  如果你需要在服务器端渲染应用程序，componentWillMount将被调用两次。一次是在server端，一次在客户端，但这并不是你想要的结果而将数据加载逻辑放在componentDidMount将确保数据只从客户端获取
• 在这方法里的代码调用setState方法不会触发重渲染，所以它一般不会用来作加载数据之用，它也很少被使用到。

extend component的方式里的constructor函数和componentWillMount是通用的作用,所以你在构造函数里初始化了组件的状态就不必在WillMount做重复的事情了

componentDidMount方法

• 装载完成，在render之后调用
• render之后并不会立即调用，而是所有的子组件都render完之后才可以调用
• 只能在浏览器端被调用，在服务器端使用react的时候不会被调用
• 在这方法中调用setState方法，会触发重渲染，所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。
• 是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。