import React, { useEffect, useState } from 'react'; function A() { useEffect(() => { console.log('[create]:a'); return () => { console.log('[unmount]: a') } }, []) return 'a'; } function B() { useEffect(() => { console.log('[create]:b') return () => { console.log('[unmount]: b') } }, []) return 'b' } export default function DiffComponent() { const [changeDiff, setChangeDiff] = useState(0); console.log('[changeDiff]:', changeDiff); return <> <div>{changeDiff ?'diff之前' : 'diff之后'}<button onClick={() => setChangeDiff(changeDiff+1)}>diff</button></div> <div> <A /> <A /> <A /> <B /> <B /> <B /> </div> </> }无key的时候(按照顺序比对)
<div> <A /> <A /> <A /> <B /> <B /> <B /> </div>
常规情况不管diff怎么点,组件都不会打印,说明复用了
长度相同,但是会有增减<div> { changeDiff == 0 ? ( <> <A /> <A /> <B /> </> ): ( <> <A /> <B /> <B /> </> ) } </div>
<div> { changeDiff == 0 ? ( <> <A /> <A /> <A /> </> ): ( <> <A /> <A /> <B /> <B /> <B /> </> ) } </div>
<div> { changeDiff == 0 ? ( <> <A /> <A /> <B /> <B /> </> ): ( <> <B /> <B /> <A /> <A /> </> ) } </div>
<div> { changeDiff == 0 ? ( <> <A key="1" /> <A key="2" /> <B key="3" /> <B key="4" /> </> ): ( <> <B key="4" /> <B key="3" /> <A key="2" /> <A key="1" /> </> ) } </div>
<div> { changeDiff == 0 ? ( <> <A /> <A key="2" /> <B key="3" /> <B key="4" /> </> ): ( <> <B key="4" /> <B key="3" /> <A key="2" /> <A /> </> ) } </div>这个A到底会不会重新重建?
<div> { changeDiff == 0 ? ( <> <A /> <A key="2" /> <B key="3" /> <B key="4" /> </> ): ( <> <B key="4" /> <B key="3" /> <A key={0} /> <A key="2" /> </> ) } </div>事实证明还是重新创建了
<!-- 堆代码 duidaima.com --> <div> { changeDiff == 0 ? ( <> <A key="2" /> <B key="3" /> <A /> <B key="4" /> </> ): ( <> <B key="4" /> <B key="3" /> <A /> <A key="2" /> </> ) } </div>只有相同的索引下才会复用