第十二周

技术
工具
一句话

技术

优秀组件设计的关键：自私原则

本文讨论了组件设计中重要的概念——自私性，即组件只关心自己的功能和样式，不关心其他组件。自私性可以帮助开发者创建更高效、易于维护的组件。
文章提出了以下四个实践自私性的方法：

单一职责原则
避免外部依赖
封装样式
明确接口
作者强调自私性并不是要孤立工作，而是鼓励开发者关注组件本身，提高组件质量，创造更健壮、可维护和可扩展的组件，为整个项目带来长远的好处。

rethinking-react-best-practices

软件是帮助人们完成某些事情的工具，不要过度关注工具的细节。随着 React 生态系统超越仅客户端范例，了解我们所处的基本约束条件非常重要。每次摆动都会获得新知识和经验，并将其整合到下一轮迭代中。框架提供更多杠杆以赋予开发者在特定情况下进行更精细化权衡的能力。优化用户体验与优化开发者体验相遇，在客户端和服务器混合模型中实现 MPA 简单模型与 SPA 丰富模型之间的平衡是很好的选择。

解锁 SVG 新姿势：ChatGPT 绘制图标+SVG Symbol 自动导入

本文介绍了如何使用 ChatGPT 生成 SVG 图标，并使用 Webpack 和 svg-sprite-loader 自动导入 SVG Symbol，从而实现不需要下载和导入文件的目标。对于需要找 icon 的情况，可以利用 ChatGPT 生成 SVG 代码，省去自己绘制图标或者自己找图标的步骤。使用 SVG Symbol，可以将所有的图标放在一个单独的 SVG 文件中，并通过引用该文件中的 Symbol 元素来使用它们。同时，该文还介绍了如何使用 Webpack 和 svg-sprite-loader 自动导入 SVG Symbol，进一步简化流程。

Internationalization In Next.js 13 With React Server Components

本文介绍了如何使用 React Server Components 和 Next.js 13 来实现国际化功能。传统的国际化实现需要在客户端加载翻译文件，这会导致客户端代码增加和性能降低。而使用 React Server Components，我们可以在服务端实现国际化，从而提高应用的性能。本文还介绍了如何使用 next-intl 来实现国际化，以及如何使用查询参数来实现交互功能，而无需使用 useState 等客户端状态管理工具。文章最后提供了一个实际案例，并给出了完整代码和一些进一步阅读的资源。