英文技术文章周刊-第 7 期：React Dev, A Brief History of Reactivity, 7 Small & Underrated React Libraries, Minisearch...

[WJCHumble]

JavaScript

• A Brief History of Reactivity，这篇文章介绍了响应式编程的历史和发展，并重点讲述了 Vue.js 和 React 框架中的响应式实现方式。作者首先介绍了响应式编程的概念和优势，包括提高代码可读性、可维护性和可扩展性等方面的好处。随后，作者介绍了早期的响应式编程框架和库，如 Knockout.js 和 AngularJS，以及它们的实现方式和局限性。接下来，作者重点讲述了 Vue.js 和 React 框架中的响应式实现方式，包括 Vue.js 中的双向绑定和 React 中的单向数据流和虚拟 DOM。作者通过详细的代码示例和图表，帮助读者更好地理解这些实现方式的原理和优缺点。最后，作者总结了响应式编程的未来发展趋势，包括更加智能化的响应式编程框架和更加高效的数据处理和渲染方式
• An Introduction to Web Workers: Run JavaScript in the Background，这篇文章介绍了 Web Workers 技术，它可以让 JavaScript 在后台运行，从而提高应用程序的性能和响应速度。作者首先解释了为什么需要 Web Workers，以及它们可以帮助我们解决哪些问题。然后，作者给出了 Web Workers 的基本概念和使用方法，包括创建 Worker、发送消息、接收消息等操作。作者还介绍了 Web Workers 的两种类型：Dedicated Worker 和 Shared Worker，以及它们的区别和适用场景。接下来，作者通过一个具体的案例，展示了如何使用 Web Workers 来处理大量数据，避免阻塞 UI 线程，从而提高应用程序的响应速度。最后，作者总结了 Web Workers 的优缺点，以及使用 Web Workers 的注意事项。这篇文章适合那些希望提高 Web 应用程序性能和响应速度的开发者阅读，尤其是对于需要处理大量数据的应用程序

CSS

• 7 useful CSS Tricks，这篇文章介绍了 7 种有用的 CSS 技巧：
  • 使用 flexbox 布局来实现自适应布局和居中定位
  • 利用 calc() 函数来进行数学运算，如计算宽度、高度和间距等
  • 使用 :not() 伪类来选择除了某个元素之外的所有元素
  • 利用伪元素 ::before 和 ::after 来添加内容和修饰样式
  • 使用 clip-path 属性来裁剪元素的形状，如实现圆形图片和不规则形状
  • 使用 transform 属性来实现 3D 效果和动画效果
  • 使用 transition 和 animation 属性来实现过渡效果和动画效果
    这些技巧都能够帮助开发者更加高效地使用 CSS，并实现更加炫酷的效果

TypeScript

• Advanced Trick for Using TypeScript Interfaces，这篇文章主要介绍了一种使用 TypeScript 接口的高级技巧，即将接口用作类型别名或基于接口定义一个新的类型。作者详细讲解了这种技巧的实现方法和应用场景，并给出了具体的代码示例。在文章的结尾，作者提醒读者在使用这种技巧时要注意一些细节和潜在的问题
• 3 TypeScript patterns that I use in my day-to-day work，这篇文章介绍了作者在日常工作中使用的三种 TypeScript 模式。首先，作者介绍了“类型别名”模式，通过定义自定义类型别名来简化代码中的复杂类型，提高代码可读性和可维护性。其次，作者介绍了“类型保护”模式，通过使用 TypeScript 的类型保护机制来确保变量的类型安全性，避免了一些潜在的运行时错误。最后，作者介绍了“装饰器”模式，通过使用 TypeScript 装饰器来扩展类和方法的功能，使代码更加灵活和可扩展。对于每种模式，作者都提供了实际的代码示例，并解释了其实现原理和应用场景。最后，作者总结了这三种模式的优点，鼓励读者在日常开发中尝试使用这些模式来提高代码质量和开发效率
• Easily Understand TypeScript Generic Utility Types，这篇文章主要介绍了 TypeScript 中的泛型工具类型，通过详细的代码示例和解释，帮助读者更容易地理解这些工具类型的作用和用法。作者首先介绍了 TypeScript 中的基本类型和泛型类型，并解释了泛型类型可以通过类型参数来实现代码的复用和通用性。随后，作者介绍了一些常用的泛型工具类型，包括 Partial、Required、Pick、Record、Exclude、Omit、ReturnType 等，对每个工具类型都进行了详细的讲解，并给出了实际的代码示例和应用场景。最后，作者提醒读者在使用这些泛型工具类型时要注意一些细节和潜在的问题，以及如何根据具体需求自定义泛型工具类型
• What Is the Use of in and out Annotations in TS Generics?，这篇文章主要讲解了 TypeScript 泛型中的 "in" 和 "out" 注解的作用。作者通过实际代码示例，详细阐述了这两个注解的含义及其在泛型中的应用场景。其中，“in” 注解用于限制泛型类型参数只能作为函数参数类型，而不能作为函数返回值类型；而“out” 注解则恰好相反，只能作为返回值类型，而不能作为参数类型。此外，作者还讨论了一些使用这两个注解时需要注意的问题。最后，作者总结了这两个注解的用途，以及它们与其他类型注解的区别

React

• React Dev，React 新的文档站点正式发布
• 7 Small & Underrated React Libraries，这篇文章介绍了 7 个小型但被低估的 React 库：
  • react-lottie：使用 Lottie 动画库在 React 应用中渲染动画
  • react-toastify：在 React 应用中实现漂亮的提示框
  • react-helmet：在 React 应用中动态设置页面标题、描述等元数据
  • react-beautiful-dnd：实现漂亮且易于使用的拖放功能
  • react-paginate：在 React 应用中实现分页功能
  • react-select：创建漂亮的多选和单选下拉列表
  • react-responsive：根据屏幕尺寸和方向等条件渲染不同的组件
    这些库都是小型但非常实用的，能够帮助开发者更加高效地开发 React 应用。文章还提供了每个库的使用示例和文档链接，方便读者深入了解和使用这些库
• 7 Best React UI Libraries You Should Use in Your Next Project in 2023，这篇文章介绍了 7 个最佳的 React UI 库，这些库都是值得在未来的项目中使用的：
  • React Bootstrap：基于 Twitter Bootstrap 的 React 组件库，提供了丰富的 UI 组件和样式
  • Material UI：一个流行的 React UI 库，提供了 Google Material Design 风格的 UI 组件，易于使用和定制
  • Ant Design：一个非常流行的 React UI 库，提供了多种风格的 UI 组件，适用于各种类型的项目
  • Chakra UI：一个快速、简单和易于使用的 React UI 库，提供了现代化的 UI 组件和自定义主题
  • Semantic UI React：一个基于 Semantic UI 的 React 组件库，提供了简单易用的组件和样式
  • Blueprint：一个轻量级的 React UI 库，提供了大量的组件和工具，适用于快速开发原型和小型项目
  • Evergreen：一个基于 React 的 UI 库，提供了简单、直观和易于定制的 UI 组件
    这些库都是非常流行和成熟的 React UI 库，可以大大提高开发者的开发效率和用户体验。文章还提供了每个库的优点和使用场景，方便读者选择适合自己项目的 UI 库
• useAsyncEffect: The Missing React Hook，这篇文章介绍了使用 async/await 语法来优化 React 中的 useEffect 钩子的方法：
  • 使用 async 函数：使用 async/await 语法来定义 useEffect 钩子函数，可以使代码更加简洁易读
  • 使用 try/catch：使用 try/catch 语句来处理异步操作中可能出现的异常和错误，避免应用崩溃或出现未知问题
  • 使用取消机制：使用取消机制来取消异步操作，避免在组件卸载后出现不必要的数据请求或其他操作
  • 使用外部函数：将异步操作封装在外部函数中，可以使代码更加模块化和易于维护
    这些方法都是有效的优化 React 中 useEffect 钩子的方法，能够帮助开发者更加优雅地处理异步操作，提高应用的性能和稳定性。文章还提供了详细的代码示例和实现方法，方便读者深入了解和应用这些优化技巧

Electron

• 10 years of Electron 🎉，这篇文章庆祝了 Electron 发布十周年，并回顾了 Electron 的历史和发展。文章介绍了 Electron 的特点和优势，以及应用 Electron 的成功案例和开发者社区的发展：
  • 特点和优势：Electron 是一个基于 Web 技术的桌面应用程序开发框架，具有跨平台、易于开发和部署、强大的功能和灵活的定制性等优点
  • 成功案例：文章列举了许多成功应用 Electron 的案例，包括 VS Code、GitHub Desktop、Slack、Discord、Microsoft Teams 等
  • 开发者社区：Electron 拥有一个庞大的开发者社区，提供了丰富的文档、工具和插件，能够帮助开发者更加轻松地开发和定制自己的应用程序
    同时，文章还介绍了 Electron 的发展历程和未来发展方向，包括对性能、安全性、可访问性等方面的优化和改进，以及对 WebAssembly、GPU 加速等新技术的应用和探索。这篇文章深入探讨了 Electron 的优势、成功案例和开发者社区，展示了 Electron 在桌面应用程序开发领域的重要地位和前景

Other

• Chatkit，Chatkit 是一个开发者工具，可以轻松地将聊天功能集成到您的应用程序中，让您的用户可以轻松地进行实时交流

GitHub

• OpenAI Cookbook，这个仓库是 OpenAI 的 Repo，旨在提供一些实用的 AI 模型和工具，帮助开发者更加轻松地构建和部署 AI 应用
• CSS Variable，这是一个关于 CSS Variable 的 Repo，提供了一组预定义的 CSS 变量和 mixin，能够帮助开发者更加轻松地使用和管理 CSS 变量，提高开发效率和代码质量
• Minisearch，这是一个 JavaScript 的迷你搜索引擎的 Repo，能够帮助开发者在客户端快速实现搜索功能，该库的主要特点包括：
  • 轻量级：体积小，性能高，适合在客户端实现快速搜索
  • 多语言支持：支持多种语言的分词和搜索
  • 自定义可调整性：支持自定义分词器、过滤器和评分器等
  • 简单易用：API 简单易懂，容易上手使用
    该库的主要使用场景包括：
  • 网页搜索：能够在客户端实现简单的网页搜索功能
  • 桌面应用：能够在桌面应用中实现本地搜索功能
  • 移动应用：能够在移动应用中实现本地搜索功能
    该库的迷你搜索引擎库身小巧但功能强大，适用于一些轻量级的搜索场景，如网页搜索、桌面应用以及移动应用等。同时，该库具有良好的可扩展性和可定制性，能够根据开发者的需求进行自定义分词器、过滤器和评分器等操作

[LiuL0703]

@WJCHumble 这篇文章地址贴错了
useAsyncEffect: The Missing React Hook