react(三)组件生命周期

组件从被创建到被销毁的过程称为组件的生命周期。通常可以分为三个阶段:挂载阶段、更新阶段、卸载阶段

每个阶段的生命周期方法如下

挂载阶段:

1、constructor

在这个方法中需要接收父组件传递过来的props属性对象,必须在这个方法中调用super(props)才能保证props被传入组件中。

该方法通常用于初始化组件的state以及绑定事件处理方法

2、componentWillMount

这个方法在组件被挂载到DOM前调用,且只会被调用一次。这个方法在实际项目中很少会用到,因为可以在该方法中执行的工作都可以提前到constructor中。在这个方法中调用this.setState不会引起组件的重新渲染。

3、render

这是定义组件时唯一必要的方法(组件的其他生命周期方法都可以省略)。在这个方法中,根据组件的props和state返回一个React元素,用于描述组件的UI,通常React元素使用JSX语法定义。需要注意的是render并不负责组件的实际渲染工作,它只是返回一个UI的描述,真正的渲染出页面DOM的工作由React自身负责。render是一个纯函数,在这个方法中不能执行任何有副作用的操作,所以不能在render中调用this.setState,这会改变组件的状态。

4、componentDidMount

在组件被挂载到DOM后调用,且只会被调用一次。这时候已经可以获取到DOM结构,因此依赖DOM节点的操作可以放到这个方法中。这个方法通常还会用于向服务器端请求数据。在这个方法中调用this.setState会引起组件的重新渲染。

componentDidMount是执行组件与服务器通信的最佳地方,原因主要有两个:

1、在componentDidMount中执行服务器通信可以保证获取到数据时,组件已经处于挂载状态,这时即使要直接操作DOM也是安全的,而componentWillMount无法保证这一点。

2、当组件在服务器端渲染时,componentWillMount会被调用两次,一次是在服务器端,另一次是在浏览器端,而componentDidMount能保证在任何情况下只会被调用一次,从而不会发送多余的数据请求

更新阶段

1、componentWillReceiveProps

这个方法只在props引起的组件更新过程中,才会被调用。State引

起的组件更新并不会触发该方法的执行。

2、shouldComponentUpdate

这个方法决定组件是否继续执行更新过程。当方法返回true时(true也是这个方法的默认返回值),组件会继续更新过程;当方法返回false时,组件的更新过程停止,后续的componentWillUpdate、render、componentDidUpdate也不会再被调用。一般通过比较nextProps、nextState和组件当前的props、state决定这个方法的返回结果。这个方法可以用来减少组件不必要的渲染,从而优化组件的性能。

3、componentWillUpdate(nextProps,nextState)

可以作为组件更新发生前执行某些工作的地方,一般也很少用到。

注:shouldComponentUpdate和componentWillUpdate中都不能调用

setState,否则会引起循环调用问题,render永远无法被调用,组件

也无法正常渲染。

4、componentDidUpdate(prevProps,prevState)

组件更新后被调用,可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps、prevState代表组件更新前的props和state。

卸载阶段

组件从DOM中被卸载的过程,这个过程中只有一个生命周期方法:

1、componentWillUnmount

这个方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清除组件中使用的定时器,清除componentDidMount中手动创建的DOM元素等,以避免引起内存泄漏。

最后还需要提醒大家,只有类组件才具有生命周期方法,函数组件是没有生命周期方法的,因此永远不要在函数组件中使用生命周期方法。

猜你喜欢

转载自blog.csdn.net/weixin_37719279/article/details/101551363