共计 1574 个字符,预计需要花费 4 分钟才能阅读完成。
- 原文地址 – 全栈小册: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 Render
Child 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 useEffect
Parent 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 componentDidMount
Parent componentDidMount
这表明子组件的 componentDidMount
在父组件的 componentDidMount
之前执行。
起因与深度剖析
- 渲染程序:React 的渲染过程是从父组件开始的,这是因为父组件通常蕴含子组件的援用。因而,父组件须要首先渲染以确定子组件应该如何渲染。
- 副作用和生命周期办法的执行:在所有组件都渲染实现后,React 会开始执行副作用和生命周期办法。这个过程是从最底层的子组件开始的,而后逐级向上。这样做的起因是,子组件通常是父组件逻辑的一部分,父组件的副作用可能依赖于子组件的状态或 DOM 元素。
正文完