react hook 实现use-watch

本文深入探讨了React自定义Hook `useWatch` 的实现原理和使用方式。`useWatch` 用于监听特定值的变化,并在变化时执行回调函数。它通过`useEffect`管理副作用,确保在值更新时执行相应的回调。此Hook适用于优化组件更新策略,提高应用性能。
摘要由CSDN通过智能技术生成
import { useEffect, useRef } from 'react';
const defaultCompare = (prev, next) => prev === next;
export const useWatch = (
  callback,
  value,
  { initialValue = '', compare = defaultCompare } = {},
) => {
  const prevValue = useRef(initialValue);
  const safeEffects = useRef([]);
  const prev = prevValue.current;
  if (!compare(prev, value)) {
    const safeEffect =
      callback === null || callback === void 0 ? void 0 : callback(prev);
    if (typeof safeEffect === 'function') {
      safeEffects.current.push(safeEffect);
    }
    prevValue.current = value;
  }
  useEffect(() => {
    safeEffects.current.forEach((safeEffect) => safeEffect());
    safeEffects.current = [];
  });
};

export default useWatch;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值