Published on

2022-9-1-前端快报

Authors
  • avatar
    Name
    noodles
    每个人的花期不同,不必在乎别人比你提前拥有

Understanding useMemo and useCallback

这篇文章介绍useMemo和useCallback

  • useMemo可以实现组件内计算逻辑的拆分缓存能力,减少页面渲染时的计算和子组件重复渲染.需要考虑的是是否可以通过组件拆分或者计算逻辑的拆分来实现计算逻辑的优化.
    useMemo
  • useCallback用于保存函数的引用,保证在依赖不变的情况下复用之前的函数
    需要注意的是在开发中不要对hook过度使用,在关键的位置做好优化比如:
  1. 使用useState定制的hook,返回的setter函数通过useCallback缓存
  2. 全局context使用useMemo缓存减少渲染

useSyncExternalStore - The underrated React API

这篇文章介绍react useSyncExternalStore的使用场景

broadcast-channel

JavaScript APIs You Don’t Know About中提及到BroadcastChannel来实现跨页面间的通信。broadcast-channel这个库通过封装BroadcastChannel、localStorage、indexedDB、node的socket来实现跨运行时的通信。

An overview of Node.js: architecture, APIs, event loop, concurrency

这篇文章介绍node的架构、同步异步的api风格、通过例子介绍node中事件循环的模型。

React I Love You, But You're Bringing Me Down

这篇文章介绍作者长期使用react的一些感受和痛点,有点观点很有共鸣。比如:

  • context的渲染问题 是否能像redux的useSelector一样来优化渲染
  • react引入的一些规则倒是代码写起来比较‘别扭’,不支持条件effect、forwardRef、hook的依赖等

工具

JSON Crack

JSON校验和结构可视化工具

grex-js

在线生成正则表达式的工具

MemLab: An open source framework for finding JavaScript memory leaks

MemLab是一个分析前端脚本内存泄露的工具,使用puppeteer来执行页面操作进而分析页面的内存状态。

tesseract.js

tesseracts是一个视频图片中文字的前端库,可以支持node和浏览器场景