2024.1.15

合集 - 自说自化(31)

1.2024.1.112024-01-112.2024.1.102024-01-103.2024.1.122024-01-124.2024.1.132024-01-13

5.2024.1.152024-01-15

6.2024.1.182024-01-197.2024.1.192024-01-198.40 个拓展思维的概念/一位 44 岁老人的人生经验2024-01-229.bigfrontend/usehooks2024-01-2310.React 面试题/Hooks CheatSheet2024-01-2411.zustand/useWhyDidYouUpdate/HTTP 缓存2024-01-2512.react tips/webpack热更新原理/webpack优化性能/超级蔬菜配比2024-01-3013.延迟Promise/单项目多npm版本/webpack好处/webpack5构建速度2024-02-0214.钝感力/孤独力/antd低代码2024-02-0615.ReadableStream/TransformStream/HMR/软件设计哲学/SSR 条件渲染/CSS.escape/Copilot2024-02-2016.写少一点/ARCHITECTURE/JavaScript类型转换/Logitech Options一直转圈2024-03-0117.prompt生成器/为什么需要react服务器组件/建议2024-03-2318.ts using/核心技能/三个我/日志/如何做好工作/多写/写简单的代码2024-04-0319.tailwindcss/React 性能优化2024-04-1220.一次性初始化/重新挂载/便捷类型/优化技巧2024-04-1921.DoD2024-04-1922.三角不等式/react ts 速查表2024-04-1923.delete/声明语句/赋值操作2024-04-2224.在macOS上管理MongoDB：服务和手动后台进程2024-04-2225.export/import2024-04-2526.深入解析JavaScript的块级作用域和for循环的性能考量2024-04-2527.常用术语2024-05-0728.停车场的投币器/return/throw/动画方案/疑难杂症/GetValue/Empty/引用解析与执行顺序/+ 和 - /双点语法2024-06-0629.new/类/null/+/PrimitiveValue/valueOf/toString/环境/HTML 脚本元素属性2024-06-0730.实时字幕/Suspense/ref的妙用/MutationObserver2024-06-2131.zustand Auto Generating Selectors/ts-pattern/swr/TypeScript在monorepo项目中实现即时更新/monorepo docker/turb 使用2024-07-05

收起

1. 9 点 50 到公司
2. 苹果醋中的醋酸可帮助改善身体的新陈代谢。
3. 公司很忙。。。
4. 注册了 cc 的 https://sorrycc.com。等待通过
5. 看到一段很有意思的代码, useLayoutEffect 放在 if 中执行，原因是这段代码只在浏览器环境运行

https://github1s.com/reactjs/react.dev/blob/HEAD/src/components/Layout/Sidebar/SidebarRouteTree.tsx#L39-L58
if (typeof window !== 'undefined') {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useLayoutEffect(() => {
      const wasExpanded = isExpandedRef.current;
      if (wasExpanded === isExpanded) {
        return;
      }
      isExpandedRef.current = isExpanded;
      if (ref.current !== null) {
        const node: HTMLDivElement = ref.current;
        node.style.pointerEvents = 'none';
        if (timeoutRef.current !== null) {
          window.clearTimeout(timeoutRef.current);
        }
        timeoutRef.current = window.setTimeout(() => {
          node.style.pointerEvents = '';
        }, duration + 100);
      }
    });
  }

6. 自定义实现useEvent

export function useEvent(fn: any): any {
  const ref = useRef(null);
  useInsertionEffect(() => {
    ref.current = fn;
  }, [fn]);
  return useCallback((...args: any) => {
    const f = ref.current!;
    // @ts-ignore
    return f(...args);
  }, []);
}