2023-第十九周

该周报主要为各个地方内容的汇总整理

• 技术
  • What Even Are React Server Components
  • How to measure page loading time with Performance API
  • React reconciliation: how it works and why should we care
• 工具
  • will-this-react-global-state-work-in-concurrent-rendering
  • react-lifecycle-visualizer
  • recharts
  • neon
  • Chat2DB
• 更新
  • View Transitions API

技术

What Even Are React Server Components

React 服务器组件是在服务器上呈现的 React 组件，旨在减少网络瀑布并创建快速构建和维护的良好用户体验。它们减少了发送到客户端的 JavaScript 数量，并且可以嵌套，从而减少了需要的请求数量。服务器组件看起来像普通的 React 组件，但需要额外的仪器来使服务器正常工作。它们不能解决所有 React 问题，只应用于更大更复杂的应用程序。

How to measure page loading time with Performance API

文章讲述了如何使用性能 API 测量页面加载时间，并提供了一个 JavaScript 实现的示例。作者还创建了一个名为 "page-loaded-in" 的 NPM 包，以帮助开发人员节省时间。在开发基于 Web 的项目时，优先考虑性能至关重要，以为用户提供无缝和高效的体验。

React reconciliation: how it works and why should we care

文章讨论了 React 渲染组件过程中的一个谜团。当条件渲染组件时，它可能在每次重新渲染时卸载并重新挂载自身，导致内部状态丢失。但是，如果多个组件使用相同的条件渲染，React 会重新渲染原始组件而不是卸载并重新挂载一个新的。这种行为是由于 React 的调和算法，该算法旨在通过修改现有元素而不是添加或删除它们来高效地更新 DOM。该文章提供了有关算法运作以及它对 React 开发的影响的详细解释。

工具

will-this-react-global-state-work-in-concurrent-rendering

在 React 并发渲染中测试打断渲染和状态分支

react-lifecycle-visualizer

可视化和完整日志追踪 React 渲染

recharts

使用 React 和 D3 构建的重新定义图表库
喜欢这种拆分组件式的，不是传入一个大的 options

neon

一个用于在 Node.js 应用和库中嵌入 Rust 的库和工具链

Chat2DB

一款由阿里巴巴开源免费的多数据库客户端工具，支持 windows、mac 本地安装，也支持服务器端部署，web 网页访问。

更新

View Transitions API

视图转换 API 提供了一种机制，可以轻松创建不同 DOM 状态之间的动画过渡，同时在单个步骤中更新 DOM 内容。
https://github.com/vuejs/vitepress/pull/2347/files
在 chrome 点击主题切换 https://deploy-preview-2347--vitepress-docs.netlify.app/