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个生命周期是无法拿到父组件调接口拿来的数据的。
Vue传值时机:
1、页面路由跳转传值生命周期
A页面——B页面
一般在A页面的beforeDestroy里面传值;在B页面created里面接收
2、父子组件传递异步数据
在父组件的mounted里面请求数据——>传递给子组件
子组件刚开始会接收到空值,可能会报错;我们需要在调用子组件的时候在上面加个判断;当异步数据执行完成后在进行渲染。
React与Vue的区别
相同点:
1. 都有组件化开发和 虚拟DOM
2. 都支持 props 进行父子组件间数据通信
3. 都支持数据驱动视图, 不直接操作真实DOM, 更新状态数据界面就自动更新
4. 都支持服务器端渲染
不同点:
1. 组件写法不一样, React 推荐的做法是JSX , 也就是把HTML 和CSS全都写进 JavaScript 了,即'all in js'; Vue 推荐的做法是 webpack+vue-loader 的单文件组件格式,即html,css,js 写在同一个文件
2. state 对象在 react 应用中不可变的,需要使用setState 方法更新状态。在 vue 中,state 对象不是必须的,数据由data 属性在vue 对象中管理
3. 虚拟DOM 不一样。
vue 会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
React 每当应用的状态被改变时, 全部组件都会重新渲染。
4. React 严格上只针对 MVC模式的 view 层,Vue 则是MVVM模式。
React 是单向数据流==>没有 vm 角色可以把 v 和 m 相互之间转换,它只是可以把数据转为视图。 Vue 是双向数据流==>它可以实现数据的双向绑定。