function Parent() {
  const forceUpdate = useForceUpdate();
  const [letters] = React.useState(["a", "b", "c"]);

  return (
    <div className="bg-yellow">
      A: {JSON.stringify(letters)}
      <ChildShowArray array={letters} />
      B: {JSON.stringify(letters)}
      <ChildChangeArray arrayToChange={letters} />
      C: {JSON.stringify(letters)}
      <ChildShowArray array={letters} />
      D: {JSON.stringify(letters)}

      <hr />
      <button type="button" onClick={forceUpdate}>re-render</button>
    </div>
  );
}

function ChildChangeArray({ arrayToChange }) {
  const elementFromArray = arrayToChange.shift();
  
  return (
    <div className="bg-red">
      elementFromArray = {JSON.stringify(elementFromArray)}
    </div>
  );
}

function ChildShowArray({ array }) {
  return (
    <div className="bg-green">
      array = {JSON.stringify(array)}
    </div>
  );
}

// helper hook
function useForceUpdate() {
  const [_state, setState] = React.useState({});
  return React.useCallback(() => { setState({}) }, []);
}

ReactDOM.createRoot(document.querySelector("#root")).render(<Parent />)

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

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Le comportement de l'extrait de code peut être expliqué si vous considérez le processus de rendu comme un algorithme de largeur d'abord.

JSX convertira :

<div className="bg-yellow">
  A: {JSON.stringify(letters)}
  <ChildShowArray array={letters} />
  B: {JSON.stringify(letters)}
  <ChildChangeArray arrayToChange={letters} />
  C: {JSON.stringify(letters)}
  <ChildShowArray array={letters} />
  D: {JSON.stringify(letters)}
</div>

Entrez le JavaScript suivant :

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 }) 创建一个不会立即调用 ChildShowArray La structure du composant. Cela créera une sorte de structure/objet intermédiaire qui ne s'exécutera que lorsque le moteur de rendu le lui demandera.

Placez-le dans {...} （JSX 上下文）中的 JavaScript 直接作为参数传递，因此直接解析。这意味着 Parent 中的所有 {JSON.stringify(letters)} pour qu'il s'exécute avant l'exécution de tout code du composant enfant.

Une fois la construction de la structure parent terminée, le moteur de rendu accédera à chaque structure/objet intermédiaire et lui demandera d'effectuer le rendu. Cela se fait de haut en bas, c'est pourquoi le premier rendu ChildShowArray 渲染仍然显示完整数组的原因。然后渲染 ChildChangeArray 并删除第一个元素。第二个 ChildShowArray reflète ce changement et est rendu sans le premier élément.

Veuillez noter, shift() 确实会更改 letters 的内容，但是当调用它时，Parent 的内容已经呈现并且不再变化。此更改确实会影响下一次渲染的Parent (cliquez sur le bouton "Render" dans l'extrait). Cela affecte également le rendu des autres composants enfants situés en dessous et qui utilisent la même référence de tableau.