每天学习一个hooks useMount
更新时间：2023年05月11日 15:12:09 作者：jimmy_fx
这篇文章主要为大家介绍了每天学习一个hooks useMount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
🐶先讲点废话
useMount，在组件首次渲染时执行。这个hook的用处也很多，比如有个select下拉框，里面的数据，就需要在初始化的时候请求后端的数据。
🦌来看看效果
可以看到，只有在初始化时，useMount执行了，页面重新渲染时，并不会执行。
🐿源码实现
const useMount = (fn: () => void) => {
// 判断一下，传如的fn是否时一个函数
if (isFunction(fn)) {
useEffect(() => {
fn?.();
}, []);
return;
}
console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
};
🐬完整demo源码
import { useEffect, useState } from "react";
import { isFunction } from "lodash";
const UseMountDemo = () => {
const [, setState] = useState({});
const useMount = (fn: () => void) => {
if (isFunction(fn)) {
useEffect(() => {
fn?.();
}, []);
return;
}
console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
};
useMount(() => {
console.log("我只在初始化的时候运行一次");
});
console.log("组件渲染了");
return <button onClick={() => setState({})}>重新render</button>;
};
export default UseMountDemo;
useUnmount
useUnmount，组件卸载时执行的 Hook，比如组件卸载时，需要清楚定时器或者相关的监听，就可以使用useUnmount。
🍓参考
有兴趣的小伙伴可以去看，react-use 和 ahooks 的源码，学习前辈们优雅的代码😍。
以上就是每天学习一个hooks useMount的详细内容，更多关于hooks useMount学习的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了React手稿之 React-Saga的详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了React日期时间显示组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了react使用节流函数防止重复点击问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
下面小编就为大家带来一篇react系列从零开始_简单谈谈react。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
React Native 中处理 Android 手机吞字的解决方案
这篇文章主要介绍了React Native 中处理 Android 手机吞字的解决方案,作者在 React Native 0.67.4 环境下，编写了一个小 demo 来复现这个问题，需要的朋友可以参考下2022-08-08
本文主要介绍了React翻页器的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
ReactiveCocoa代码实践之-UI组件的RAC信号操作
这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了react vue背景挂载机器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论