CodingWithAlice Blog

useEffect/useCallback 如果依赖 ref 会发生什么？

useEffect/useCallback 如果依赖 ref 会发生什么？总结： 1、ref.current 的赋值方式如果是 ` ref.current = { value: count }` 覆盖式的，如果作为 useEffect/useCallback 的依赖，会触发无限循环 2、核心原则：ref 用于存储可变但不触发渲染的值，如果要响应变化，应该用 state 关...

Posted by CodingWithAlice on December 28, 2025

lodash 的 isEqual和 cloneDeep

lodash 的 isEqual和 cloneDeep 总结： 1、isEqual 深度比较函数的比较规则：【浅比较（只比较代码，不比较闭包）】先判断是不是同一个引用 -> 如果不是，判断toString() 转换后代码是否一致 -> 不会深入比较闭包 + this (有些变量值运行时确定，无法静态解析) ...

Posted by CodingWithAlice on August 2, 2025

useEffect 依赖的 state 初始化算变化吗

useEffect 依赖的 state 初始化算变化吗总结：state 初始化是否算“变化”？不算。useState(0) 的初始赋值是同步的，useEffect 只是在挂载后检查依赖时发现 count 存在（值为 0） -> 但原本挂载后， useEffect 的副作用会被执行一次，因此只执行一次 1、依赖项为空数组组件挂载（初次渲染）后，立即执行一次...

Posted by CodingWithAlice on July 28, 2025

class 组件的 setState 和函数组件的 useState 的使用差异

class 组件的 setState 和函数组件的 useState 的使用差异总结： this.setState 的第二个参数可以传递一个回调函数，在状态更新完成且组件重新渲染后执行，类似于 useEffect 的副作用操作 useState 的更新函数本身不支持回调参数，可以通过 useEffect 依赖模拟 React ...

Posted by CodingWithAlice on July 27, 2025

class 组件中 state 初始化导致的闪烁

class 组件中 state 初始化导致的闪烁总结： 1、class 组件声明的 state 如果来源于 props 可以直接赋值，避免闪烁 2、value ?? ‘’ 和 value || ‘’ 的区别是 ?? 只关心 null 和 undefined(2个)，** 会过滤所有的 falsy 值(6个)** ...

Posted by CodingWithAlice on July 27, 2025

class 组件 componentDidUpdate 的生命周期认知更新

class 组件 componentDidUpdate 的生命周期认知更新总结： 1、class 组件中，componentDidUpdate 生命周期在第一次 render 后才会执行 2、class 组件中，render 可以直接通过 props/state 变化触发 3、class 组件中，想要阻塞 render ，只有 shouldComponentUpdate 生命周...

Posted by CodingWithAlice on July 27, 2025

TS 声明 key 为 number value 为 boolean 的对象 hash

TS 声明 key 为 number value 为 boolean 的对象 hash 总结：方案一、二底层逻辑完全一致方案1：索引签名 const hash: { [key: number]: boolean } = {} 方案2：内置工具类 Record Record<number, boolean> 是 TS 的...

Posted by CodingWithAlice on July 27, 2025

在组件回调函数获取最新值失败的原因和方案

Posted by CodingWithAlice on July 27, 2025

防抖节流 + 在React组件中的使用踩坑

防抖节流 + 在React组件中的使用踩坑总结： 1、平时键盘抬起就会搜索，防抖后，间隔一段时间不输入才会搜索，节流后，在频繁触发的事件流中，函数以固定的频率执行 2、在组件中实现防抖时，需要注意配合 useCallback 避免组件重新渲染导致定时器失效 3、使用防抖后，需要清理一、实际应用 - 踩坑记录 1、使用场景防抖 debounce ...

Posted by CodingWithAlice on July 26, 2025

useEffect+addEventListener 的坑

useEffect+addEventListener 的坑总结：即使 React 组件重新渲染，事件监听绑定的依旧是当时的函数引用，捕获的是当时的作用域和变量背景问题 addEventListener 事件监听器绑定的回调函数，一直是旧的原因 addEventListener 事件监听器绑定时捕获的是当时的 props 和 state（当时的作用...

Posted by CodingWithAlice on July 26, 2025

CodingWithAlice

useEffect/useCallback 如果依赖 ref 会发生什么？

lodash 的 isEqual和 cloneDeep

useEffect 依赖的 state 初始化算变化吗

class 组件的 setState 和函数组件的 useState 的使用差异

class 组件中 state 初始化导致的闪烁

class 组件 componentDidUpdate 的生命周期认知更新

TS 声明 key 为 number value 为 boolean 的对象 hash

在组件回调函数获取最新值失败的原因和方案

防抖节流 + 在React组件中的使用踩坑

useEffect+addEventListener 的坑

FEATURED TAGS

ABOUT ME

FRIENDS

useEffect/useCallback 如果依赖 ref 会发生什么？

lodash 的 isEqual和 cloneDeep

useEffect 依赖的 state 初始化算变化吗

class 组件的 setState 和 函数组件的 useState 的使用差异

class 组件中 state 初始化导致的闪烁

class 组件 componentDidUpdate 的生命周期认知更新

TS 声明 key 为 number value 为 boolean 的对象 hash

在组件回调函数获取最新值失败的原因和方案

防抖节流 + 在React组件中的使用踩坑

useEffect+addEventListener 的坑

FEATURED TAGS

ABOUT ME

FRIENDS

class 组件的 setState 和函数组件的 useState 的使用差异