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接收)
网友评论