父子组件生命周期 ​

Vue 3 ​

Vue 3 的生命周期钩子包括：

1. beforeCreate: 实例初始化后，数据观测和事件配置之前。
2. created: 实例创建完成，数据观测和事件配置完成，但 DOM 未挂载。
3. beforeMount: 挂载开始之前，模板编译完成，但未插入 DOM。
4. mounted: 实例挂载到 DOM 后调用。
5. beforeUpdate: 数据更新时，DOM 重新渲染之前。
6. updated: 数据更新后，DOM 重新渲染完成。
7. beforeUnmount: 实例销毁之前。
8. unmounted: 实例销毁后。

父子组件生命周期顺序 ​

1. 父组件 beforeCreate
2. 父组件 created
3. 父组件 beforeMount
4. 子组件 beforeCreate
5. 子组件 created
6. 子组件 beforeMount
7. 子组件 mounted
8. 父组件 mounted

更新时：

1. 父组件 beforeUpdate
2. 子组件 beforeUpdate
3. 子组件 updated
4. 父组件 updated

销毁时：

1. 父组件 beforeUnmount
2. 子组件 beforeUnmount
3. 子组件 unmounted
4. 父组件 unmounted

React 18 ​

React 18 的生命周期方法包括：

1. constructor: 组件初始化时调用。
2. static getDerivedStateFromProps: 在渲染前调用，返回新的 state。
3. render: 渲染组件。
4. componentDidMount: 组件挂载后调用。
5. shouldComponentUpdate: 决定组件是否更新。
6. getSnapshotBeforeUpdate: 在 DOM 更新前调用。
7. componentDidUpdate: 组件更新后调用。
8. componentWillUnmount: 组件卸载前调用。

特别注意，这里区别于Vue，React的函数组件生命周期在useEffect钩子中具体表现如下：

• 当不传第二个参数时，在useEffect中能模拟DidMount、DidUpdate、WillUnmount生命周期函数钩子。

const Component = () => {
  useEffect(() => {
    // DidMount
    // DidUpdate ---> re-render时重新执行effect函数

    return () => {
      // WillUnmount
    }
  })
}

• 传入第二个参数并且是数据的依赖state数组，同上一种情况。

const Component = () => {
  useEffect(() => {
    // DidMount
    // DidUpdate ---> re-render时重新执行effect函数
    
    return () => {
      // WillUnmount
    }
  }, [state])
}

• 传入第二个参数并且是空数组[]，模拟DidMount、WillUnmount生命周期函数钩子。

const Component = () => {
  useEffect(() => {
    // DidMount

    return () => {
      // WillUnmount
    }
  }, [])
}

父子组件生命周期顺序 ​

1. 父组件 constructor
2. 父组件 static getDerivedStateFromProps
3. 父组件 render
4. 子组件 constructor
5. 子组件 static getDerivedStateFromProps
6. 子组件 render
7. 子组件 componentDidMount
8. 父组件 componentDidMount

更新时：

1. 父组件 static getDerivedStateFromProps
2. 父组件 shouldComponentUpdate
3. 父组件 render
4. 子组件 static getDerivedStateFromProps
5. 子组件 shouldComponentUpdate
6. 子组件 render
7. 子组件 getSnapshotBeforeUpdate
8. 父组件 getSnapshotBeforeUpdate
9. 子组件 componentDidUpdate
10. 父组件 componentDidUpdate

销毁时：

1. 父组件 componentWillUnmount
2. 子组件 componentWillUnmount

总结 ​

• Vue 3: 父组件先初始化，子组件挂载完成后父组件挂载。更新和销毁时，父组件先触发钩子，子组件随后。
• React 18: 父组件先初始化并渲染，子组件随后初始化和渲染。更新和销毁时，父组件先触发钩子，子组件随后。

两者在生命周期顺序上有所不同，但都遵循从父到子的顺序。