在 React 的函数组件中，有时我们需要在组件首次挂载后执行某些操作，这在类组件中通常通过 componentDidMount 生命周期方法来实现。useComponentDidMount 钩子提供了一种简洁的方式来在函数组件中实现相同的功能。这个自定义钩子使得在组件挂载后执行一次性操作变得简单直观。以下是如何实现和使用这个自定义钩子：
const useComponentDidMount = onMountHandler => {
React.useEffect(() => {
onMountHandler();
}, []);
};
const Mounter = () => {
useComponentDidMount(() => console.log('Component did mount'));
return <div>Check the console!</div>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<Mounter />
);
这个技巧的关键点包括：
使用 useEffect钩子，并传入一个空数组作为依赖项。这确保了回调函数只在组件挂载后执行一次。 模拟了类组件中 componentDidMount的行为。
使用这个钩子时，需要注意以下几点：
