React Hooks实现组件生命周期，监听组件挂载、卸载、更新事件

最新推荐文章于 2024-07-20 05:52:04 发布

劲枫

最新推荐文章于 2024-07-20 05:52:04 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： javascript react.js 前端

本文链接：https://blog.youkuaiyun.com/TCF_JingFeng/article/details/129423668

React 专栏收录该内容

3 篇文章

订阅专栏

这篇文章展示了如何使用React的useEffectHook来模拟组件的生命周期方法，包括在组件挂载后执行的onMount，卸载前执行的onUnmount，以及更新前执行的onUpdate。这些Hook函数使得无状态组件也能处理生命周期事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 组件挂载后
 * componentDidMount in hook way
 *
 * @export
 * @param {() => any} onMount
 * @returns
 */
import { useEffect } from "react";

export function useOnMount(onMount: () => any) {
  return useEffect(() => {
    if (onMount) {
      //
      onMount()
    }
  })
}

/**
 * 组件卸载前
 * componentWillUnmount in hook way
 *
 * @export
 * @param {() => any} onUnmount
 * @returns
 */
export function useOnUnmount(onUnmount: () => any) {
  return useEffect(() => {
    return () => onUnmount && onUnmount()
  }, [])
}
/**
 * 组件更新前
 * componentDidUpdate in hook way
 *
 * @export
 * @param {() => any} onUpdate
 * @returns
 */
export function useOnUpdate(onUpdate: () => any) {
  return useEffect(() => {
    return () => onUpdate && onUpdate()
  })
}