这是一个创建于 41 天前的主题，其中的信息可能已经有所发展或是发生改变。
又来分享最近看到比较好的外文了，这次是看到 Christian Ekrem 的 blog 写的这篇文章，觉得还是讲的蛮深入的，感兴趣的可以去他 blog 全部看看。好像他对 react memoization 研究挺深入的，我自己全部都看了一遍，然后翻译了两篇，这里放出来一篇。
[React 协调机制：组件背后的隐形引擎]( https://halo.chenkeyan.com/archives/fe-weekly-9-react-keys)
给我印象比较深刻的点，一个是 react 组件重新渲染的规则，一个是 key 值影响组件状态，然后就是最后通过 react 协调机制给的实践建议。
想看英文原文可以去这👉： https://cekrem.github.io/posts/react-reconciliation-deep-dive/
我这边跟着文章也做了几个小 demo ，可以体验体验：
组件渲染规则演示
https://codepen.io/showmecode_ahh/pen/LEEyEdP
通过 key 值状态保持演示
https://codepen.io/showmecode_ahh/pen/azzWdro
通过 key 值状态转换演示
https://codepen.io/showmecode_ahh/pen/qEEmbGd
[React 协调机制：组件背后的隐形引擎]( https://halo.chenkeyan.com/archives/fe-weekly-9-react-keys)
给我印象比较深刻的点，一个是 react 组件重新渲染的规则，一个是 key 值影响组件状态，然后就是最后通过 react 协调机制给的实践建议。
想看英文原文可以去这👉： https://cekrem.github.io/posts/react-reconciliation-deep-dive/
我这边跟着文章也做了几个小 demo ，可以体验体验：
组件渲染规则演示
https://codepen.io/showmecode_ahh/pen/LEEyEdP
通过 key 值状态保持演示
https://codepen.io/showmecode_ahh/pen/azzWdro
通过 key 值状态转换演示
https://codepen.io/showmecode_ahh/pen/qEEmbGd
2 条回复 • 2025-04-27 11:58:35 +08:00
 |
1
q673115816 40 天前
由于 div 变为 span ，React 会销毁整个旧树，包括 Counter ，并从头构建新树。
|
 |
2
sugarkeek OP @q673115816 哈哈哈是的
|
Select Language