Use SVGs as React Components in Astro

Migrating a website from Next.js to Astro (v4/v3), one challenge was faced using SVGs as React Components in Astro. While Next.js easily converts SVGs to React Components, Astro's default setting processes them as a base64 data URL. The solution involves utilizing the Vite bundler's vite-plugin-svgr. The approach is versatile, supporting multiple frameworks, but we should use updated Astro versions to ensure smooth SVG conversions.


Why Array Index as Key Is Bad in React

从上一篇笔记分析,key 属性是优化列表结点的主要方式,而稳定、唯一、可预测的 key 属性有助于 Diff 算法计算出准确的 DOM 操作,然而数组的索引虽然唯一,但是并不"稳定",也难以预测


Introduction to Assumptions Made in React Reconciliation

每当 state 发生变化,ReactJS 就会重新渲染新的 Virtual DOM,接着执行 Diff 算法与旧的 Virtual DOM 比较,计算出差异,最后执行 DOM 操作。ReactJS 基于以下两个假设优化了标准实现的 Diff 算法