目录
对比
命名规则
react：componentWillXxx，componentDidXxx
vue2：beforeXxx，xxxed
vue3：onBeforeXxx，onXxxed
生命周期
应用
created（vue2）（此时可访问this，更早地响应）：ajax请求
mounted：操作dom（初始化节点、事件监听、副作用、ajax、网络请求）
WillUnmount：清除 timer，取消ajax、网络请求、订阅
渲染顺序
洋葱模型
React
组件挂载：插入 DOM 树
挂载前constructor()
挂载时render()
挂载后componentDidMount()
更新
更新时render()：prop/state改变
更新后componentDidUpdate()
卸载
卸载前componentWillUnmount()：
React17增删的生命周期
废除的生命周期
componentWillMount
componentWillRecieveProps
componentWIllUpdate
新增的生命周期
getDerivedStateFromProps(nextProps, prevState)：用props更新state的过程
替换componentWillReceiveProps：只有当父组件造成重新渲染时才调用
在每次渲染render之前都会调用：返回一个对象表示新的 state；若不需要更新，返回 null 即可
getSnapshotBeforeUpdate(prevProps, prevState)：读取最新的DOM数据
替换 componentWillUpdate（update后 DOM 更新前被调用）
返回值将作为 componentDidUpdate(prevProps, prevState, snapshot) 的snapshot
componendDidCatch(error, info)：错误边界
常见问题
setState 更新的值不变，还是会触发生命周期钩子
Vue
初始阶段：beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeUnmout、unmounted
生命周期
Vue3
使用：先导入
onErrorCaptured监听组件的统一报错：onErrorCaptured(error, component, details)
对比
命名规则
react：componentWillXxx，componentDidXxx
vue2：beforeXxx，xxxed
vue3：onBeforeXxx，onXxxed
生命周期
| 生命周期 | React16 | React17 | Vue2 | Vue3（使用先导入） |
| 初始化 | constructor | beforeCreate | setup | |
| created | ||||
| componentWillMount | beforeMount | onBeforeMount | ||
| componentDidMount | mounted | onMounted | ||
| 更新 | componentWIllUpdate | getSnapshotBeforeUpdate(prevProps, prevState) |
beforeUpdate | onBeforeUpdate |
| shouldComponentUpdate，componentDidUpdate | updated |
onUpdated | ||
| 卸载 | componentWillUnmount | beforeDestroy | onBeforeUnmount | |
| destroyed | onUnmounted | |||
| 监听组件的统一报错 |
componendDidCatch(error, info)错误边界 |
onErrorCaptured(error, component, details) | ||
应用
created（vue2）（此时可访问this，更早地响应）：ajax请求
mounted：操作dom（初始化节点、事件监听、副作用、ajax、网络请求）
WillUnmount：清除 timer，取消ajax、网络请求、订阅
渲染顺序
洋葱模型
React
生命周期钩子函数就是回调函数
组件挂载：插入 DOM 树
挂载前constructor()
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
挂载时render()
class 组件中唯一必须实现的方法。
挂载后componentDidMount()
组件（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。
更新
更新时render()：prop/state改变
它只有在 prop 或state发生变化时才可能更新和重新渲染。
更新后componentDidUpdate()
首次渲染不会执行此方法。
卸载
卸载前componentWillUnmount()：
class Welcome extends React.Component {
state = {
msg: 'hello world'
}
constructor(props){
super(props);
console.log('constructor');
}
componentDidMount = () => {
// react中发起ajax请求的初始操作，在这个钩子中完成
console.log('componentDidMount');
}
componentDidUpdate = () => {
// 等DOM更新后触发的钩子
console.log('componentDidUpdate');
}
componentWillUnmount = () => {
console.log('componentWillUnmount');
}
handleClick = () => {
/* this.setState({
msg: 'hi react'
}); */
//this.forceUpdate();
root.unmount(); // 触发卸载组件
}
render(){
console.log('render');
return (
<div>
<button onClick={this.handleClick}>点击</button>
{ this.state.msg }
</div>
);
}
}React17增删的生命周期
废除的生命周期
componentWillMount
componentWillRecieveProps
componentWIllUpdate
官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本。由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数
在 dom 被挂载之前的阶段都可以被打断重来，导致 componentWillMount、componentWillUpdate、componentWillReceiveProps 在一次更新中可能会被触发多次，因此那些只希望触发一次的副作用应该放在 componentDidMount 中
新增的生命周期
getDerivedStateFromProps(nextProps, prevState)：用props更新state的过程
替换componentWillReceiveProps：只有当父组件造成重新渲染时才调用
接收父组件传递过来的 props 和组件之前的状态
在每次渲染render之前都会调用：返回一个对象表示新的 state；若不需要更新，返回 null 即可
最常见的误解就是 getDerivedStateFromProps 和 componentWillReceiveProps 只会在 props “改变”时才会调用。实际上只要父组件重新渲染时，这两个生命周期函数就会重新调用，不管 props 有没有“变化”
static静态函数：定义在React组件类上的，而非实例上，无法通过
this来访问组件的属性或状态，而是可以直接通过组件类本身调用。静态方法通常用于执行与组件实例无关的任务，例如工具函数。
class Form extends Component {
state = {
email: this.props.defaultEmail,
prevUserID: this.props.userID
};
static getDerivedStateFromProps(props, state) {
// Any time the current user changes,
// Reset any parts of state that are tied to that user.
// In this simple example, that's just the email.
if (props.userID !== state.prevUserID) {
return {
prevUserID: props.userID,
email: props.defaultEmail
};
}
return null;
}
// ...
}
getSnapshotBeforeUpdate(prevProps, prevState)：读取最新的DOM数据
Snapshot[ˈsnæpʃɑːt]：快照
替换 componentWillUpdate（update后 DOM 更新前被调用）
返回值将作为 componentDidUpdate(prevProps, prevState, snapshot) 的snapshot
在更新期间保留其滚动位置的聊天线程
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
// (snapshot here is the value returned from getSnapshotBeforeUpdate)
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
componendDidCatch(error, info)：错误边界
如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，
就像使用了try catch，不会将错误直接抛出了，保证应用的可用性
常见问题
setState 更新的值不变，还是会触发生命周期钩子
Vue
初始阶段：beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeUnmout、unmounted
生命周期
Vue3
使用：先导入
// vue3
<script setup>
import { onMounted } from 'vue'; // 使用前需引入生命周期钩子
onMounted(() => {
// ...
});
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
// ...
});
</script>
// vue2
<script>
export default {
mounted() { // 直接调用生命周期钩子
// ...
},
}
</script>
onErrorCaptured监听组件的统一报错：onErrorCaptured(error, component, details)
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
throwError() {
// 人为地抛出一个错误
throw new Error('An error occurred.');
}
},
onErrorCaptured(error, component, details) {
console.error('Captured an error in component:', component);
console.error('Error details:', error);
console.error('Details:', details);
// 可以选择返回 false 来阻止错误继续传播
// return false;
}
};
</script>
你真的了解 React 生命周期吗 - 掘金文章来源：https://www.toymoban.com/news/detail-590515.html
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子] - 掘金文章来源地址https://www.toymoban.com/news/detail-590515.html
到了这里，关于React和Vue生命周期、渲染顺序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
