【taro react】 ---- 常用自定义 React Hooks 的实现【一】

1. useMount 实现

在组件首次渲染时,执行的方法。

1.1 实现原理

  1. 使用 Effect Hook
  2. 如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。
  3. 这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行。

1.2 实现代码

import { useEffect } from 'react';
/**
 * @description: 组件初始化时执行一次
 * @param {*} fn 组件初始化时执行的函数
 */
export function useMount(fn){
  useEffect(() => {
    fn()
  },[])
}

1.3 使用实例

import { useMount } from '@utils/hooks';
export default const Test= (props) => {
  useMount(() => {
    console.log('useMount')
  })
  return <View></View>
}

1.4 输出结果

猜你喜欢

转载自blog.csdn.net/m0_38082783/article/details/130956720