每天学习一个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 Fiber树的创建和替换过程运用了双缓存技术，直接将旧的 fiber 树替换成新的 fiber 树，这样做的好处是省去了直接在页面上渲染时的计算时间，避免计算量大导致的白屏、卡顿，现在你一定还不太理解，下面进行详细讲解,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React实现爷孙组件间相互通信，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了React技巧之改变元素样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了VSCode搭建React Native环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家介绍了React Context原理深入理解源码示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了详解react-redux插件入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下2022-07-07
React useContext与useReducer函数组件使用
useContext和useReducer 可以用来减少层级使用, useContext，可以理解为供货商提供一个公共的共享值，然后下面的消费者去接受共享值，只有一个供货商，而有多个消费者，可以达到共享的状态改变的目的2023-02-02
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本篇文章主要介绍了react redux入门示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论