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

最新推荐文章于 2024-06-19 14:46:20 发布

劲枫

最新推荐文章于 2024-06-19 14:46:20 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/129423668

版权

React 专栏收录该内容

3 篇文章

订阅专栏

/**
 * 组件挂载后
 * 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()
  })
}