react生命周期
2018-09-05 本文已影响0人
丿米波
| react | Description |
|---|---|
| constructor():构造函数 | 组件被加载前最先调用，并且仅调用一次； 定义状态机变量 |
| componentWillMount() | 组件初始渲染（render()被调用前）前调用，并且仅调用一次； 如果在这个函数中调用setState改变某些状态机，react会等待setState完成后再渲染组件 |
| render() | componentWillMount之后，componentDidMount之前； 渲染挂载组件 |
| componentDidMount() | render之后被调用，并且仅调用一次；渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。） |
| componentWillReceiveProps(nextProps) | 组件渲染后，当组件接收到新的props时被调用；这个函数接收一个object参数（新的props）；props是父组件传递给子组件的。父组件发生render的时候子组件就会调用； 渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。） |
| shouldComponentUpdate(nextProps, nextState) | 组件挂载后（即执行完render），接收到新的state或props时被调用，即每次执行setstate都会执行该函数，来判断是否重新render组件，默认返回true；接收两个参数：第一个是心的props，第二个是新的state。 如果有些变化不需要重新render组件，可以在该函数中阻拦 |
| componentWillUpdate() | 在接收到新的props 或者 state，重新渲染 之前立刻调用，在初始化渲染的时候该方法不会被调用 ； 为即将发生的重新渲染做一些准备工作 |
| componentDidUpdate() | 重新渲染后调用，在初始化渲染的时候该方法不会被调用； 使用该方法可以在组件更新之后操作DOM 元素 |
| componentWillUnmount() | 组件被卸载前调用； 在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。 |
特别注意
- 当一个页面中存在子父组件时，要注意componentWillMount和componentDidMount的使用，如果需要先加载父组件（获取网路数据），父组件传值给子组件，再加载子组件（获取网路数据），那么不能同时在子父组件中使用componentDidMount获取网路数据，因为会先执行子组件的componentDidMount，会由于未得到父组件的传值而报错；
解决方案：
（1）父组件：componentWillMount，子组件：componentDidMount；
（2）父组件：componentWillMount，子组件：componentWillMount； - 当一个页面中如要实现左右联动效果，（比如：a页面中包含b1（左）和b2（右）页面，单击b1中的知识点，b2页面内容对应变化，b1向b2通过redux传参，b2首次通过 componentDidMount接收，后来通过componentWillReceiveProps接收）
