react学习笔记-react生命周期
提前感谢aermin的笔记详解React生命周期(包括react16版),让我收益匪浅。
生命周期四大阶段
我通常把react生命周期划分为四个阶段:组件初始化,组件挂载,组件更新,组件卸载。
组件初始化(initialization)
import React, { Component } from 'react';
class Test extends Component {
constructor(props) {
super(props);
}
}
super(props)
用来调用基类的构造方法(constructor()
), 也将父组件的props注入给子组件,供子组件读取(组件中props只读不可变,state可变)。
而constructor()用来做一些组件的初始化工作,如定义this.state的初始内容。
组件挂载(Mounting)
此阶段分为componentWillMount,render,componentDidMount三个时期。
-
componentWillMount
在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用。
在componentWillMount里发起请求,不管多快得到结果也赶不上首次render,而且componentWillMount在服务器端渲染也会被调用到(当然,也许这是预期的结果),这样的IO操作放在componentDidMount里更合适。
常用参数:this.props
,this.state
含义:当前的props
,state
-
render
根据组件的props和state(无两者的重传递和重赋值,论值是否有变化,都可以引起组件重新render) ,return 一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用。 -
comonentDidMount
组件挂载到DOM后调用,且只会被调用一次,这时可以获取到真实的DOM节点。
常用参数:this.props
,this.state
含义:当前的props
,state
。
组件更新(update)
setState引起的state更新或父组件重新render引起的props更新,更新后的state和props相对之前无论是否有变化,都将引起子组件的重新render。
在此阶段主要涉及了componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate几个周期。
- componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中,参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的,所以可以在这个方法中判断nextProps和this.props是否改变,以及改变了要执行什么操作,比如根据新的props调用this.setState更新子组件数据并重新渲染子组件。
常用参数:nextProps
,this.props
,this.state
含义:新的props
,更新前的props
,当前的state
。 - shouldComponentUpdate(nextProps,nextState)
此方法通过比较nextProps,nextState及当前组件的this.props,this.state,返回true时当前组件将继续执行更新过程,返回false则当前组件更新停止,以此可用来减少组件的不必要渲染,优化组件性能。
常用参数:nextProps
,nextState
,this.props
,this.state
含义:更新后的props
,更新后的state
,更新前的props
,更新前的state
。 - componentWillUpdate(nextProps,nextState)
此方法在调用render方法前执行,在这里可以执行一些组件更新发生前的工作,一般较少用。 - render
重新调用render,与组件挂载阶段功能一致。 - componentDidUpdate(prevProps,prevState)
此方法在组件更新后被调用,可以操作组件更新后的DOM。
常用参数:prevProps
,prevState
,this.props
,this.state
含义:更新前的props
,更新前的state
,更新后的props
,更新后的state
。
组件卸载(Unmount)
这个阶段只有一个生命周期:componentWillUnmount,此方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清除组件中使用的定时器,清除componentDidMount中手动创建的DOM元素等,以免引起内存泄漏。
React v16.4 的生命周期
原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启async rendering,在render函数之前的所有函数(componentWillMount,componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate
),都有可能被执行多次,这意味着IO操作(数据请求)也有可能被多次调用。
为了解决这个问题,React v16.3的更新中引入了两个新的生命周期函数:getDerivedStateFromProps
,getSnapshotBeforeUpdate
。
static getDerivedStateFromProps(props, state)
static getDerivedStateFromProps(props, state)
在组件创建时和更新时的render方法之前调用,它应该返回一个对象来更新状态(需要提前初始化state
状态),或者返回null来不更新任何内容。也就是说,无论哪一种情况(setState引起的state更新或父组件重新render引起的props更新)引起的组件更新都将调用它。所以除了shouldComponentUpdate,其他在render函数之前的所有函数(componentWillMount,componentWillReceiveProps,componentWillUpdate)都可以被一个静态函数getDerivedStateFromProps替代,强制开发者在render之前只做无副作用的操作,而且能做的操作局限在根据props和state决定新的state。
常用参数:props
,state
含义:更新后的props
,更新后的state
。
getSnapshotBeforeUpdate(prevProps,prevState)
getSnapshotBeforeUpdate()
被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在DOM可能更改之前捕获一些信息(例如滚动位置)。该生命周期返回的任何值都将作为参数传递给componentDidUpdate()
。
常用参数:prevProps
,prevState
,this.props
,this.state
含义:更新前的props
,更新前的state
,更新后的props
,更新后的state
。
官方示例:
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
//我们是否要添加新的 items 到列表?
// 捕捉滚动位置,以便我们可以稍后调整滚动.
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
//如果我们有snapshot值, 我们已经添加了 新的items.
// 调整滚动以至于这些新的items 不会将旧items推出视图。
// (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}