React生命周期函数

大家好，欢迎来到IT知识分享网。

1.render

render是React生命周期函数中必须调用的方法，render主要负责页面的渲染，页面初始加载就会先调用render（）一次。

当render被调用时，它会检查this.props和this.state的变化并且返回以下类型：

• React元素。通过jsx创建，比如说<div />会被渲染为react节点，<MyComponent />会被渲染成自定义组件。无论是<div />还是<MyComponent />都时react元素
• 数组或是Fregrament
• Protals。可以将子元素渲染到任何DOM树中，一般默认将子元素渲染到DOM节点中最近的父节点。
• 文本节点，字符串或是数值类型
• 布尔型或者是Null。什么都不渲染

当shouldComponentUpdate 返回值为false时，默认页面不更新，便也不会调用render方法

2. constructor

constructor是react中的构造函数，一般如果没有数据初始化就不用单独调用，在其他语句之间必须写，super（props），props可以理解为形式参数。

props在react官方文档中的定义：“当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。”

在react中，构造函数仅处理以下两种情况

• this.state()初始化
• 为事件处理函数进行实时绑定，一般也不怎么用，将函数定义写为箭头函数，一般不存在this指向绑定的问题

3.componentDidMount

componentDidMout（）当组件挂载完毕（插入到DOM）后，会被立即调用。常常将依赖于Dom节点初始化的事件写在这里，比如网络请求获取数据，写在这里很合适。这里也比较适合添加订阅模式，但是在componentWillUnMount要记得取消订阅。

4.componentDidUpdate

componentDidUpdate（）会在更新完成后被立即调用，首次渲染不会执行此方法。

当组件完成更新后，可以在此处进行DOM操作。如果对更新前后进行了props的比较，可以在此处进行网络请求（当props没有发生变化就不会执行网络请求）

componentDidUpdate（prevProps）{
    if(this.props.ID != prevProps){
        this.fetchDate(this.props.ID)
    }
}

注意：如果在componentDidUpdate()中使用this.setState()必须包裹在条件语句中，避免进入死循环。 

5.componentWillUnmount

componentWillUnmount（）会在组件销毁之前被调用。在此方法中主要进行清理工作，比如清除timer、取消订阅者模式（如果在componentDidMount（）发布了订阅模式）或是取消网络请求

不常用的生命周期函数

1.getDrivedStateFromprops

2.getSnapshotBeforeUpdate

3.shouldComponentUpdate常用于性能优化

在面试中经常会被问到，该函数主要用于优化性能。防止render进行多次渲染，消耗性能。