父子生命周期

本节目标：理解“父子生命周期”的核心思路，并能把它用于实际开发或面试表达。 Vue 的父组件和子组件的生命周期钩子函数的执行顺序是非常有规律的。以下是在 Vue 组件层级关系中，父组件和子组件生命周期钩子函数的执行顺序：

创建阶段：
- 父：beforeCreate
- 父：created
- 父：beforeMount
- 子：beforeCreate
- 子：created
- 子：beforeMount
- 子：mounted
- 父：mounted
更新阶段：
- 父：beforeUpdate
- 子：beforeUpdate
- 子：updated
- 父：updated
销毁阶段：
- 父：beforeDestroy
- 子：beforeDestroy
- 子：destroyed
- 父：destroyed

注意点：

当 Vue 实例开始挂载时，父组件的 beforeMount 钩子首先被调用，然后是子组件的整个生命周期，直到子组件 mounted 钩子被调用，之后父组件的 mounted 钩子被调用。
当 Vue 实例或数据更新时，父组件的 beforeUpdate 钩子首先被调用，然后是子组件的 beforeUpdate 钩子，接着是子组件的 updated 钩子，最后是父组件的 updated 钩子。
在销毁过程中，首先是父组件的beforeDestroy 钩子被调用，然后是子组件的整个销毁生命周期，从beforeDestroy 到destroyed，最后是父组件的destroyed 钩子。

当 Vue 实例或数据更新时，子组件是否走生命周期（特别是 beforeUpdate 和 updated 钩子）取决于子组件自身的数据是否发生变化。

如果子组件的 prop 或本地数据发生了改变，那么子组件的 beforeUpdate 和 updated 钩子将会被调用。

如果仅仅是父组件的数据发生了改变，而这些数据并没有被传递给子组件（即子组件的 prop 和本地数据都没有变化），那么子组件的 beforeUpdate 和 updated 钩子不会被调用。

以下是一个简单的例子：

父组件 vue Copy code <template> <div> <button @click="updateParentData">Update Parent Data</button> <child-component :someProp="parentData"></child-component> </div> </template>

export default { components: { ChildComponent }, data() { return { parentData: 'initial' }; }, methods: { updateParentData() { this.parentData = 'updated'; } } }; </script> 子组件 vue Copy code <template> <div> {{ someProp }} </div> </template>

父组件的 beforeUpdate 和 updated 钩子会被调用。因为 parentData 是作为 prop 传递给子组件的，子组件的 someProp 发生了改变，所以子组件的 beforeUpdate 和 updated 钩子也会被调用。但如果 parentData 并没有传给子组件，那么点击按钮后，子组件的 beforeUpdate 和 updated 钩子就不会被调用。

在 React 中，组件的生命周期有一些不同的钩子（或称为生命周期方法）和行为方式。React 的函数组件通常使用 Hooks 如 useEffect 来管理副作用和组件的生命周期，而类组件则使用诸如 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。

React 父子组件更新如果父组件重新渲染，它的所有子组件都会进行重新渲染，除非子组件通过 React.memo() 或 shouldComponentUpdate 进行了性能优化。

函数组件中的 useEffect Hook 或类组件中的 componentDidUpdate 通常用来执行组件更新后的副作用。

在 React 中，如果父组件的 state 或 props 更新，子组件默认也会重新渲染。但这与 Vue 不同，Vue 更加智能地追踪依赖，只有当子组件的相关 props 或自身的状态改变时，子组件才会更新。

示例 React 父组件 jsx Copy code import React, { useState } from 'react'; import ChildComponent from './ChildComponent';

const ParentComponent = () => { const [parentData, setParentData] = useState('initial');

const updateParentData = () => { setParentData('updated'); };

return ( <div> <button onClick={updateParentData}>Update Parent Data</button> <ChildComponent someProp={parentData} /> </div> ); };

export default ParentComponent; React 子组件 jsx Copy code import React, { useEffect } from 'react';

const ChildComponent = ({ someProp }) => { useEffect(() => { console.log('Child component updated'); }, [someProp]);

return <div>{someProp}</div>; };

export default ChildComponent; 在这个例子中：

当你点击“Update Parent Data”按钮后，父组件会重新渲染。因为 parentData 是作为 prop 传递给子组件的，子组件的 useEffect 也会触发。如果你想避免不必要的子组件更新，你可以使用 React.memo 或在类组件中使用 shouldComponentUpdate 方法来进行优化。

总体而言，React 和 Vue 的组件生命周期有相似之处，但具体的实现和优化方式有所不同。

父子生命周期 ​

父子生命周期