React进阶

1、React的生命周期钩子

1.1、生命周期钩子

生命周期钩子函数会在组件的生命周期的关键地方自动执行，React提供了以下声明周期钩子：

• componentWillMount(): 组件加载前调用

• componentDidMount(): 组件加载后调用

• componentWillUpdate(): 组件更新前调用

• componentDidUpdate(): 组件更新后调用

• componentWillUnmount(): 组件卸载前调用

• componentWillReceiveProps() : 组件接受新的Props前调用

• shouldComponentUpdate(): 用于让React知道当前状态或者属性的改变是否影响组件的输出。

1.2、完整生命周期方法

装配

• constructor()：构造函数，装配之前被调用
• componentWillMount()
• render()：用来描述UI
• componentDidMount()

更新

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

卸载

• componentWillUnmount()

2、Ajax请求

React中，Ajax请求一般在componentDidMount()生命周期钩子中发出，也就是在组件完成加载后。

componentDidMount() {
    const url='...';
    $.getJSON(url)
     .done()
     .fail();
}

参考资料

1. React 技术栈
2. 2.

二级标题

三级标题

四级标题

注：