React 一个美妙之处在于它通过抽象降低了操作真实 DOM 的复杂度。这让我们不必手动去查询元素，也不必思考如何向这些元素添加类，也不必再苦于浏览器的不一致性，而是让我们专心编写组件并专注于用户体验。然而，仍然会有一些场景（虽然很少！）需要我们访问 DOM。 而当涉及到 DOM 时，最重要的是理解并学习如何正确使用 Ref 以及它的周边。因此在本文中，我们要弄清楚为什么需要访问 DOM、Ref 如何帮助我们实现这一点、useRef、forwardRef 和 useImperativeHandle 是什么，以及如何正确使用它们。此外，我们还要讨论如何避免使用 forwardRef 和 useImperativeHandle，但是同时还要拥有它们提供的能力。 除了上述内容之外，我们还将学习如何在 React 中实现命令式 API！
useSyncExternalStore 是 React 18 引入的一个 hook。起初我以为它主要用于第三方库，比如 @tanstack/rect-query、Jotai、Zustand、Redux 等。在 React 官方文档中，将它和 useInsertionEffect 一起被称为 "library hooks（库 hooks）"。
React 在之前的文档中提到了 Suspense for data fetching[1] 的理念，虽然在新的文档中下线了，但还是有相关的请求库做了实现，比如 useSwr[2] 和 useQuery[3]。React 团队一直想对请求这件抽象且频繁的事情做更好的支持，因此有个新提案带来了新的 Hook —— use。
Prop drilling 是指当上层组件中持有 state，而一个深度嵌套的组件需要使用这个 state 时，一种做法是用 props 透过中间组件一层层往下传，尽管中间组件并不需要他们。 只需要做一下重构就可以避免 prop drilling：
作为一名开发者，我们都希望开发出来的应用程序能够稳定、完美的工作，并且能够满足所有可以想象得到的边缘场景。但是，作为一个人类，我们都会犯一些错误，根本写不出没有 Bug 的代码。无论我们多么小心，无论我们编写多少自动化测试，依然会不可避免地出现错误。但最重要的是，当错误影响到用户体验时，要能够防御这些错误，尽可能地减少影响范围，并以优雅的方式处理它，直到它能够被真正修复。 因此，本文主要讨论 React 中的错误处理：当发生错误时，我们可以做什么；不同的错误捕获方法有哪些限制，以及如何突破这些限制。
如果你还没有接触过复合组件，那么阅读完本文就会对它有初步认识。 复合组件是 React 的一个高级模式，通常是由两个或两个以上的组件共同来实现某项功能。其中一个组件作为父组件，其余组件作为它的子组件，利用这种显式父子关系来共享隐式状态。 复合组件支持组件中的状态和逻辑的共享，可以帮助开发人员构建更直观和灵活性的 API，避免了在子组件间使用 props 进行通信。
