function Parent() { const forceUpdate = useForceUpdate(); const [letters] = React.useState(["a", "b", "c"]); return ( 
 A: {JSON.stringify(letters)}  B: {JSON.stringify(letters)}  C: {JSON.stringify(letters)}  D: {JSON.stringify(letters)} 
 re-render 
 ); } function ChildChangeArray({ arrayToChange }) { const elementFromArray = arrayToChange.shift(); return ( 
 elementFromArray = {JSON.stringify(elementFromArray)} 
 ); } function ChildShowArray({ array }) { return ( 
 array = {JSON.stringify(array)} 
 ); } // helper hook function useForceUpdate() { const [_state, setState] = React.useState({}); return React.useCallback(() => { setState({}) }, []); } ReactDOM.createRoot(document.querySelector("#root")).render()

.bg-yellow { background: yellow } .bg-red { background: red } .bg-green { background: green }

Tingkah laku dalam coretan kod boleh dijelaskan jika anda menganggap proses pemaparan sebagai algoritma yang mengutamakan keluasan.

JSX akan menukar:

 A: {JSON.stringify(letters)}  B: {JSON.stringify(letters)}  C: {JSON.stringify(letters)}  D: {JSON.stringify(letters)} 

Masukkan JavaScript berikut:

React.createElement("div", { className: "bg-yellow" }, "A: ", JSON.stringify(letters), React.createElement(ChildShowArray, { array: letters }), "B: ", JSON.stringify(letters), React.createElement(ChildChangeArray, { arrayToChange: letters }), "C: ", JSON.stringify(letters), React.createElement(ChildShowArray, { array: letters }), "D: ", JSON.stringify(letters), )

React.createElement(ChildShowArray, { array: letter })创建一个不会立即调用ChildShowArrayStruktur komponen. Ia akan mencipta beberapa jenis struktur/objek perantaraan yang hanya akan dijalankan apabila pemapar memintanya.

Letakkannya dalam{...}（JSX 上下文）中的 JavaScript 直接作为参数传递，因此直接解析。这意味着Parent中的所有{JSON.stringify(letters)}untuk dijalankan sebelum sebarang kod dalam komponen anak dijalankan.

Apabila membina struktur induk selesai, pemapar akan mengakses setiap struktur/objek perantaraan dan memintanya untuk membuat. Ini dilakukan dari atas ke bawah, itulah sebabnya pemaparanChildShowArray渲染仍然显示完整数组的原因。然后渲染ChildChangeArray并删除第一个元素。第二个ChildShowArraypertama mencerminkan perubahan ini dan dipaparkan tanpa elemen pertama.

Sila ambil perhatian,shift()确实会更改letters的内容，但是当调用它时，Parent的内容已经呈现并且不再变化。此更改确实会影响下一次渲染的Parent(klik butang "Rerender" dalam coretan). Ia juga mempengaruhi pemaparan komponen anak lain di bawahnya yang menggunakan rujukan tatasusunan yang sama.