• 原文地址--全栈小册：https://skillgroup.cn/framework/react/render-order.html

在理论开发过程中，咱们常常会遇到父子组件的嵌套应用。这时，理解组件的渲染程序和副作用（Side Effects）的执行程序就显得尤为重要。本文将深入探讨这两个方面，并通过具体的案例来进行解释。

父子组件的渲染程序

根本准则

在 React 中，组件的渲染过程是从父组件开始的。当一个父组件被触发渲染时，它的所有子组件也会随之渲染。这个过程是递归的，也就是说，子组件的子组件也会被渲染，依此类推。

示例与剖析

思考以下代码：

const Parent = () => {  console.log("Parent Render");  return (    <div>      <Child />    </div>  );};const Child = () => {  console.log("Child Render");  return <div>Child</div>;};

在这个例子中，当Parent组件被触发渲染时，控制台的输入程序会是：

Parent RenderChild Render

这表明父组件首先被渲染，而后是子组件。

函数组件与useEffect

根本准则

在函数组件中，useEffect是用于执行副作用的次要钩子。当波及到父子组件时，子组件的useEffect会在父组件的useEffect之前执行。

示例与剖析

思考以下代码：

const Parent = () => {  useEffect(() => {    console.log("Parent useEffect");  }, []);  return (    <div>      <Child />    </div>  );};const Child = () => {  useEffect(() => {    console.log("Child useEffect");  }, []);  return <div>Child</div>;};

在这个例子中，控制台的输入程序会是：

Child useEffectParent useEffect

这表明子组件的useEffect在父组件的useEffect之前执行。

类组件与生命周期办法

根本准则

在类组件中，componentDidMount是一个罕用的生命周期办法，用于解决组件挂载后的逻辑。与函数组件中的useEffect类似，子组件的componentDidMount会在父组件的componentDidMount之前执行。

示例与剖析

思考以下代码：

class Parent extends React.Component {  componentDidMount() {    console.log("Parent componentDidMount");  }  render() {    return (      <div>        <Child />      </div>    );  }}class Child extends React.Component {  componentDidMount() {    console.log("Child componentDidMount");  }  render() {    return <div>Child</div>;  }}

在这个例子中，控制台的输入程序会是：

Child componentDidMountParent componentDidMount

这表明子组件的componentDidMount在父组件的componentDidMount之前执行。

起因与深度剖析

  1. 渲染程序：React 的渲染过程是从父组件开始的，这是因为父组件通常蕴含子组件的援用。因而，父组件须要首先渲染以确定子组件应该如何渲染。
  2. 副作用和生命周期办法的执行：在所有组件都渲染实现后，React 会开始执行副作用和生命周期办法。这个过程是从最底层的子组件开始的，而后逐级向上。这样做的起因是，子组件通常是父组件逻辑的一部分，父组件的副作用可能依赖于子组件的状态或 DOM 元素。