403 - 《MDH Weekly 2023 回顾（2）- React Part 2》

年底了，做下 MDH Weekly 一年的文章回顾。我把今年周刊里的文章重新理了一遍，删选了觉得目前看仍旧有价值的文章，做了下分类并重新翻了一遍。这篇是关于 React 的部分。

1、关于 React 组件组织和拆分。几个思路，1）提取子组件以拆分视图，2）提取非视图逻辑到 hooks，3）提取领域模型以封装逻辑。但也要注意别过度抽象，个人感觉文中的抽象有些过，线性的逻辑更适合阅读。详见 https://martinfowler.com/articles/modularizing-react-apps.html

2、关于组件组织。好的组织方式有这些优点，1）易于追踪的数据流，2）封装良好的组件，3）良好的渲染性能。一些点，1）避免属性钻取（prop drilling），2）Slotted Components，组件可以让父组件决定如何在它们内部放置内容，3）注意 Parent 和 Owner 的区别，Parent 是树结构的上下级，Owner 表示由谁渲染，可能跨很多 Parent 级，4）通过提升组件来扁平化拥有者层级，可以使数据流更短，从而实现更好的组件封装。详见 https://julesblom.com/writing/parents-owners-data-flow

2、关于 Suspense 在 CSR、SSR 和 Server Components 下的应用。1）CSR，在 React.lazy 加载时显示一个回退界面，以及在兼容 Suspense 的框架里声明式地处理加载和错误状态；2）SSR，在 CSR 的基础上，在 <Suspense /> 中包装的服务器端渲染组件在客户端上选择性地进行 hydration；3）Server Components，在 SSR 的基础上，在 <Suspense /> 中包装的异步服务器组件分阶段地流式传输到客户端。详见 https://elanmed.dev/blog/suspense-in-different-architectures

3、关于 React 常见陷阱。文章介绍 9 种常见陷阱，包括：使用零进行条件判断、直接修改状态、未生成 key、缺少空格、在更改状态后访问它、返回多个元素、从不受控制到受控制的转换、缺少样式括号和异步效果函数。对于每种陷阱，文章都提供了解决方法，并给出了示例代码。详见 https://www.joshwcomeau.com/react/common