React-生命周期
组件生命周期的三个阶段
- Mounting(加载阶段)
- Updating(更新阶段)
- Unmounting(卸载阶段)
先来介绍一个生命周期的定义:
- componentWillMount(){}
// Mounting 安装阶段
// 在客户端和服务器上,在初始渲染发生之前立即调用一次 如果在这个方法中调用setState,
// render()将看到更新的状态,并且只会执行一次,尽管状态改变。
- componentDidMount(){}
// Mounting 安装阶段
// 调用一次,只在客户端(不在服务器上),在初始渲染发生后立即
// 子组件的componentDidMount()方法在父组件的componentDidMount()方法之前被调用
// setTimeout setInterval AJAX 在此之行,强烈建议
【注】:componentWillMount
和componentDidMount
这两个生命周期函数,只在页面刷新时执行一次,而render
函数是只要有state和props变化就会执行,这个初学者一定要注意。
- componentWillReceiveProps(nextProps){}
// Updating 更新阶段
// 在组件接收新props时调用。初始渲染不调用此方法。
// 老的props可以用this.props 新值就用nextProps查看
// 在此函数中调用this.setState()不会触发附加的渲染。
- shouldComponentUpdate(nextProps, nextState){}
// Updating 更新阶段
// 当正在接收新的props或状态时,在渲染之前调用。
// 此方法必须返回false or true 否则报错 true则渲染,false则不渲染!在此声明周期中可以考虑是否需要进行渲染!避免不必要的性能浪费
// 如果shouldComponentUpdate返回false,那么render()将被完全跳过,直到下一个状态改变。此外,不会调用componentWillUpdate和componentDidUpdate。
// 默认返回true
// 如果性能是一个瓶颈,特别是有几十个或几百个组件,请使用shouldComponentUpdate来加快您的应用程序。
// return true or false
//----------------------------------------------------------------------------------------------------------------
//生命周期性能优化
//例如:input框输入值
shouldComponentUpdate(nextProps,nextState){
if (nextProps.content!==this.props.content) {
return true
}else{
return false
}
- componentWillUpdate(nextProps, nextState){}
// Updating 更新阶段
// 当正在接收新的props或state时立即调用。初始渲染不调用此方法
// 您不能在此方法中使用this.setState()。如果您需要更新state以响应prop更改,请改用componentWillReceiveProps
- componentDidUpdate(nextProps, nextState){}
// Updating 更新阶段
// 在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。
// 当组件已更新时,使用此操作作为DOM操作的机会
- componentWillUnmount(){}
// Unmounting 卸载阶段
// 在组件从DOM卸载之前立即调用。
// 在此方法中执行任何必要的清理,例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy
在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用,并且也引入了新的 2 个 API 来解决问题
在之前的版本中,如果你拥有一个很复杂的复合组件,然后改动了最上层组件的 state,那么调用栈可能会很长,调用栈过长,再加上中间进行了复杂的操作,就可能导致长时间阻塞主线程,带来不好的用户体验。Fiber 就是为了解决该问题而生。
Fiber 本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新。
对于如何区别优先级,React 有自己的一套逻辑。对于动画这种实时性很高的东西,也就是 16 ms 必须渲染一次保证不卡顿的情况下,React 会每 16 ms(以内) 暂停一下更新,返回来继续渲染动画。
对于异步渲染,现在渲染有两个阶段:reconciliation 和 commit 。前者过程是可以打断的,后者不能暂停,会一直更新界面直到完成。
Reconciliation(调和) 阶段
==》调和过程:即React更新中对DOM找不同的过程,通常对比两个N个节点的树形结构的算法,
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
因为 Reconciliation 阶段是可以被打断的,所以 Reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况,从而引起 Bug。由此对于 Reconciliation 阶段调用的几个函数,除了 shouldComponentUpdate 以外,其他都应该避免去使用,并且 V16 中也引入了新的 API 来解决这个问题。
Commit 阶段
- componentDidMount
- componentDidUpdate
- componentWillUnmount
getDerivedStateFromProps
用于替换 componentWillReceiveProps
,该函数会在初始化和 update
时被调用
static getDerivedStateFromProps(nextProps, prevState) {
const {type} = nextProps;
// 当传入的type发生变化的时候,更新state
if (type !== prevState.type) {
return {
type,
};
}
// 否则,对于state不进行任何操作
return null;
}
- 无条件的根据 prop 来更新内部 state,也就是只要有传入 prop 值, 就更新 state
- 只有 prop 值 或 state 值不同时才更新 state 值。
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.someMirroredValue !== nextProps.someValue) {
return {
derivedData: computeDerivedState(nextProps),
someMirroredValue: nextProps.someValue
};
}
// Return null to indicate no change to state.
return null;
}
}
getSnapshotBeforeUpdate
用于替换 componentWillUpdate
,该函数会在 update
后 DOM 更新前被调用,用于读取最新的 DOM 数据。
getSnapshotBeforeUpdate
----------更新前获取快照
componentWillReceiveProps(nextProps){}
- 在此函数中调用this.setState()不会触发附加的渲染。
componentWillUpdate(nextProps, nextState){}
-
// 您不能在此方法中使用this.setState()。如果您需要更新state以响应prop更改,请改用componentWillReceiveProps
React16新的生命周期弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate
新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数(componentWillMount、componentWillReceivePorps,componentWillUpdate)
React16并没有删除这三个钩子函数,但是不能和新增的钩子函数(getDerivedStateFromProps、getSnapshotBeforeUpdate)混用,React17将会删除componentWillMount、componentWillReceivePorps,componentWillUpdate
新增了对错误的处理(componentDidCatch)