Vue与React区别_有这一篇就够了

袁广飞

已于 2024-04-25 19:54:27 修改

阅读量690

点赞数 1

文章标签： react.js vue.js 前端

于 2023-03-07 18:55:10 首次发布

本文链接：https://blog.csdn.net/weixin_61387700/article/details/129387854

版权

React生命周期：

分为三个阶段：实例化（Mounting）、存在期（Updating）和销毁期（Unmounting）。

实例化（Mounting）

这个阶段是组件第一次渲染到DOM中的过程。

constructor(props)
- 作用：构造函数，用于初始化组件的状态（state）和绑定事件处理器。
static getDerivedStateFromProps(props, state)
- 作用：在每次渲染之前调用，用于根据props更新state。返回null表示不需要更新。
render()
- 作用：返回组件的虚拟DOM结构，供React进行DOM的渲染。
componentDidMount()
- 作用：组件挂载到DOM后调用，通常用于发起网络请求、订阅事件或执行其他只在DOM可用时才需要的操作。

存在期（Updating）

这个阶段是组件在运行和交互过程中的状态更新。

static getDerivedStateFromProps(props, state)
- 作用：同样在每次渲染之前调用，用于根据props更新state。
shouldComponentUpdate(nextProps, nextState)
- 作用：用于控制组件是否需要根据新的props或state重新渲染。返回true表示需要渲染，返回false表示不需要。
render()
- 作用：同实例化阶段，返回组件的虚拟DOM结构。
getSnapshotBeforeUpdate(prevProps, prevState)
- 作用：在DOM即将更新之前调用，用于在可能发生的DOM变更之前从DOM捕获一些信息（例如滚动位置）。
componentDidUpdate(prevProps, prevState, snapshot)
- 作用：组件的DOM更新后调用，通常用于在DOM更新后执行操作，如操作DOM、网络请求等。

销毁期（Unmounting）

这个阶段是组件从DOM中卸载的过程。

componentWillUnmount()
- 作用：组件卸载前调用，用于执行清理操作，如取消网络请求、移除监听事件、清理DOM元素等。

在React 16.3及以后的版本中废除的生命周期方法：

componentWillMount、componentWillReceiveProps、componentWillUpdate

类组件和函数组件区别：

1. **语法**：

- 类组件使用 ES6 中的 class 语法来定义组件，继承自 React.Component 或其子类。

- 函数组件是一个简单的 JavaScript 函数，接收 props 作为参数并返回 React 元素。

2. **状态管理**：

- 类组件可以拥有状态（state），通过 this.state 和 this.setState() 进行管理。状态的更新会触发组件的重新渲染。

- 函数组件之前是无状态的，但是在 React 16.8 版本之后引入了 Hooks，使得函数组件也可以拥有状态，并且使用 useState、useEffect 等 Hooks 来管理状态和副作用。

3. **生命周期**：

- 类组件拥有生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等，可以在组件的不同阶段执行特定的操作。

- 函数组件也可以使用 useEffect Hook 模拟生命周期，实现在组件挂载、更新和卸载时执行相应的操作。

4. **性能**：

- 函数组件通常比类组件具有更好的性能，因为函数组件没有实例化过程，没有额外的性能开销。

- 类组件在实例化过程中需要创建实例和绑定方法，相对而言性能略低于函数组件。

5. **代码复用**：

- 由于函数组件支持 Hooks，可以更方便地实现逻辑复用，将逻辑提取为自定义 Hook，并在多个组件中共享使用。

- 类组件可以通过继承和组合的方式实现代码复用，但相对而言比较繁琐。

总的来说，随着 React Hooks 的引入，函数组件在开发中越来越受欢迎，可以更简洁、更灵活地编写组件，并且在性能上也有一定的优势。但对于一些需要管理复杂状态和生命周期的组件，仍然可以选择类组件。

Vue生命周期：

Vue 2的生命周期：

初始化阶段：

1. beforeCreate()：在实例初始化之后，数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用。

2. created()：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el 属性目前不可见。

DOM挂载阶段：

1. beforeMount()：在挂载开始之前被调用，相关的 render 函数首次被调用。

2. mounted()：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

数据更新阶段：

1. beforeUpdate()：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

2. updated()：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作，然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

组件销毁阶段：

1. beforeDestroy()：实例销毁之前调用，在这一步，实例仍然完全可用。

2. destroyed()：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

keep-alive的生命周期:

1. activated()：keep-alive 组件激活时调用。

2. deactivated()：keep-alive 组件停用时调用。

3. errorCaptured()：当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继续向上传播。

Vue 3的生命周期：

setup()：这是 Vue 3 引入的一个新的生命周期钩子，它在开始创建组件之前执行，即在 beforeCreate 和 created 钩子之前。主要用于设置响应式状态、执行副作用以及返回渲染函数或渲染对象。
onBeforeMount()：在组件挂载到节点上之前执行的函数。此时，组件的虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上。
onMounted()：组件挂载完成后执行的函数。此时，组件已经挂载到真实 DOM 上，可以访问到 DOM 元素。
onBeforeUpdate()：组件更新之前执行的函数。在这个阶段，组件的虚拟 DOM 即将更新，但尚未应用到真实 DOM 上。
onUpdated()：组件更新完成之后执行的函数。此时，组件的虚拟 DOM 已经更新并应用到真实 DOM 上。
onBeforeUnmount()：组件卸载之前执行的函数。在这个阶段，组件即将被销毁，但尚未开始销毁过程。
onUnmounted()：组件卸载完成后执行的函数。此时，组件已经被完全销毁，无法再访问其任何属性和方法。

`keep-alive`的生命周期：

onActivated()：当组件被激活时执行。
onDeactivated()：当组件失活时执行，例如从 A 组件切换到 B 组件时，A 组件会执行这个钩子。

关于vue父子组件生命周期执行顺序：

常见的问题：

1、父组件的created函数中无法通过 $refs 操作子组件。

是因为$refs只在组件渲染完成后才填充，并且它是非响应式的，所以只有在子组件的mounted生命周期函数之后即子组件的dom元素渲染完成后，父组件才可以通过 $refs 直接操作子元素。（子组件加上 ref ,父组件使用 $refs ，在父组件的created函数中无法操作子组件。）

2、父组件在created函数中发送ajax请求，子组件中无法获取到数据。

是因为父组件的created函数中调用了某个子组件需要的数据接口，而这个接口请求是属于异步操作，此时会把异步操作放到消息队列中，等到后面的父子生命周期函数等一系列同步任务执行完成后，才会执行异步任务从而读取消息队列的任务执行回调函数（这是JS的单线程特点）。在执行父组件mounted函数中接口才会返回数据，父组件中的变量才能拿到该数据，但是子组件中的 created 、 mounted 这样只会执行一次的生命周期钩子已经执行了，所以子组件的前4个生命周期是无法拿到父组件调接口拿来的数据的。