技术文章翻译: React 协调机制
| V2EX - 技术 | Default[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