晚天的前端碎碎谈

Shadow DOM 是一种 Web 标准，它允许开发者在主文档的 DOM 中嵌入一个隔离的 DOM 子树，这个子树有自己的元素、样式和脚本，而不会影响主文档。Shadow DOM 的主要作用是封装，

React Suspense 是 React 16.6 引入的一个特性，它允许组件在渲染之前“等待”某些条件满足，并且能够指定一个加载状态（如旋转的加载指示器），在这个条件满足之前展示给用户。这项特性

React Fiber 是 React 16 中引入的新的协调引擎或重写的核心算法。目的是增强 React 应用程序的性能和响应性，特别是在动画、布局和手势等交互密集型任务中。Fiber 的核心设计理

背景 React 自从 2013 年首次发布以来，已经经历了 11 年历史，也经历了几个关键版本，2017 年，16.0 引入新的核心架构 Fiber，支持了异步渲染；2019 年，16.8 引入了

useTransition 是 React 18 中引入的新 Hook，它是并发模式（Concurrent Mode）功能的一部分。useTransition 允许你告诉 React 某些更新具有较低

作用： useSyncExternalStore 是 React 18 中引入的 Hook，用于在 React 组件中安全地订阅外部（非 React）数据源，同时保持与 React 的更新机制同步。它

当你在 React 组件中使用 Context API 并把状态或计算得来的值传递给 Provider 时，如果这些值没有被正确的缓存，每次组件重新渲染都会创建一个新的对象或函数。这会导致所有消费该

useContext 是 React 的一个内建 Hook，它允许函数组件订阅 React 的 Context 对象。通过使用 useContext，你可以让组件在不通过中间元素逐层传递 props

声明式数据流 声明式数据流指的是通过组件的属性（props）来传递数据，而不是直接在组件内部改变或获取数据。这种方式使得数据的流向更清晰，易于管理和追踪，同时也更易于测试和重用组件。 以下是一个简单的

useImperativeHandle 是 React 中的一个高级 Hook，用于在函数组件中自定义暴露给父组件的实例值。通常情况下，你应该避免使用命令式代码和直接操作子组件的实例，而是通过声明式的

useId 是 React 18 中引入的一个新 Hook，它用于生成一个稳定、唯一的标识符（ID）。这个 Hook 主要用于解决客户端渲染和服务器端渲染（SSR）之间 ID 不一致的问题，以及在组件

useDeferredValue 是 React 18 中引入的新 Hook，它用于在 React 的并发模式下优化用户体验。当你希望在保持界面响应的同时，推迟渲染不那么急迫的更新时，可以使用 use

useRef 是 React 提供的一个 Hook，它用于在函数组件中访问和操作 DOM 节点或存储可变的值，而这些值在组件的整个生命周期中保持不变。 作用： 访问 DOM 节点：useRef 可以获

useReducer 是 React 提供的一个 Hook，它可以在函数组件中管理复杂的状态逻辑。当你的组件需要处理多个子状态值或当下一个状态依赖于之前的状态时，使用 useReducer 通常比 u

这里有一个简单的 useLayoutEffect 示例，它通过修改 DOM 元素的样式触发页面重绘，并在点击按钮时使用 useLayoutEffect 来检测这个改变： 在这个例子中，我们定义了一个

performance.now() 和 Date.now() 是 JavaScript 中用于获取当前时间的两种不同的方法，但它们有几个关键区别： 精度和分辨率： performance.now() 

一切还要从 Excalidraw 说起。 从 Excalidraw 说起 长时间以来，我在日常工作学习过程中始终都有很强的绘制「流程图」、「框架图」、「线框图」等的诉求。尝试过非常多的工具，比如 Om

大家好，我是晚天 从一个想法说起 如果大家看过我的往期文章，一定知道我基于 Excalidraw 开发了一款支持中文手绘和多画布的白板工具，并开放了免费产品服务，产品取名 Handraw，网址是 ha

如果你不只闷头写代码，还需要方案设计、内部分享、向上汇报、述职答辩、追求晋升等等，绘图工具几乎是互联网从业者标配工具。好用的绘图工具，可以大幅提升绘图效率和图形效果，甚至能够让你的汇报鹤立鸡群、增色不

SOLID原则是一组面向对象设计（Object Oriented Design）的基本原则，它们旨在提高软件设计的质量和可维护性。这些原则是由Robert C. Martin在他的书籍《Agile S