【React】useUpdateEffect(状态更新生命周期)
前言
事情是这样的。今天我要完成的一个功能模块中有一个功能。 这个功能需要我监听状态的改变并做出反应。
然后就有了以下代码👇
这种写法有一个问题,代码高度耦合。我发现,我所有的周期代码都写在一个函数里面。代码量一多,这个函数会变得很不可读。并且。在完成这个功能的时候。我还需要增加一个本来就可以不存在状态并对他进行逻辑判断。我觉得这样写很不好,可读性和可维护性一般都很一般。
有那么一瞬间,我有点怀念写Vue的那些时光。怀念Vue的updated生命周期。
我希望React也会有一个类似于update的生命周期。可是他没有。
为了不被这种胶着的逻辑继续恶心下去,为了不被领导鄙视,也为了和同事装杯。我自己封装了一个useUpdateEffect。
useUpdateEffect
useUpdateEffect代码实现
useUpdateEffect实现代码👇(附详细注释)
TS版本
/**
* 自定义hooks
*
* 用于弥补原先hook的不足
*/
import { DependencyList, EffectCallback, useEffect, useRef } from "react";
//是否时第一次
const isFirstRender = (): boolean => {
const isFirst: React.MutableRefObject<boolean> = useRef(true); //不会因为重复 render 重复申明, 类似于类组件的 this.xxx
const { current } = isFirst;
//如果是第一次,改变状态并返回true
if (current) {
isFirst.current = false;
return true;
}
return current;
}
//依赖更改时候生命周期
/**
* @param effect 更新时所需要调用的函数
* @param deps 更新的依赖
*/
const useUpdateEffect = (effect: EffectCallback, deps: DependencyList):void => {
//是否是第一次更新
const isFirst: boolean = isFirstRender();
useEffect(() => {
//如果不是第一次执行函数
if (!isFirst) return effect();
}, deps);
}
export {
useUpdateEffect, //update生命周期
};
useUpdateEffect实现代码👇(附详细注释)
JS版本
import { useEffect, useRef } from "react";
//是否时第一次
const isFirstRender = () => {
const isFirst = useRef(true); //不会因为重复 render 重复申明, 类似于类组件的 this.xxx
const { current } = isFirst;
//如果是第一次,改变状态并返回true
if (current) {
isFirst.current = false;
return true;
}
return current;
}
//依赖更改时候生命周期
/**
* @param effect 更新时所需要调用的函数
* @param deps 更新的依赖
*/
const useUpdateEffect = (effect, deps) => {
//是否是第一次更新
const isFirst = isFirstRender();
useEffect(() => {
//如果不是第一次执行函数
if (!isFirst) return effect();
}, deps);
}
export {
useUpdateEffect, //update生命周期
};
上面的代码,直接复制走就可以用。
useUpdateEffect使用方式
- 引入
- 使用
使用方式和useEffect没有差别。贼拉方便。
实现原理
其实实现思想很简单。
简单说就是
设置一个状态true,如果是第一次,则什么都不执行并改变状态为false。
第二次执行判断状态是否为false,如果是,则执行外部传入的函数。
这里有一个需要注意的点是:如何防止我们设置的这个状态true重复声明。useRef是个好东西。这个,可以阻止状态重复声明。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanejfe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel下划线不显示怎么办
PHP中文网 06-23 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24