掌握 React 的 useComponentDidMount 钩子

简介

在本实验中，我们将学习如何在 React 中使用 useComponentDidMount 钩子。这个钩子允许我们在组件挂载后立即执行一个回调函数，类似于类组件的 componentDidMount() 方法。在本实验结束时，你将更好地理解如何使用这个钩子以及它在你的 React 项目中如何发挥作用。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

React 的 useComponentDidMount 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

要在组件挂载后立即执行一个回调函数，你可以使用 useEffect() 钩子，并将空数组作为第二个参数。这将确保提供的回调函数在组件挂载时只执行一次。下面展示的 useComponentDidMount() 函数使用这个钩子来实现与类组件的 componentDidMount() 生命周期方法相同的行为。

const useComponentDidMount = (onMountHandler) => {
  React.useEffect(() => {
    onMountHandler();
  }, []);
};

const Mounter = () => {
  useComponentDidMount(() => console.log("组件已挂载"));

  return <div>查看控制台！</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Mounter />);

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React 的 useComponentDidMount 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。