この質問は、実装ではなく、react がどのように変更を処理し、反応するかについて詳しく学ぶためのものなので、immutable-props-apprach を少し開発させます。

配列の最初の要素を取得し、コンポーネントにプロップとして渡される元の配列からそれを削除しようとしています:

shift() メソッドの定義より::

shift() メソッドは、配列から最初の要素を削除し、削除された要素を返します。このメソッドは配列の長さを変更します。

elementFromArray 変数には配列内の要素が含まれていますが、配列は完成しており、まったく影響を受けず、すべての要素が含まれています。

しかし、どうしてそんなことが可能なのでしょうか? React は props を参照によって渡す必要があるため、元の配列が影響を受けるはずです。 React が何らかの保護を設けていて、それらの変更が親に反映されないのであれば理解できますが、それでも変更を子に反映させたいと考えています。 この動作を説明するのに役立つものは見つかりません。ほとんどのリソースでは、小道具の不変メソッドと回避策の見つけ方についてのみ言及されており、その背後にある理由やロジックについては言及されていません。

elementFromArray 変数には配列内の要素が含まれていますが、配列は完成しており、まったく影響を受けず、すべての要素が含まれています。ただし、Push() メソッドを使用すると、変更が反映され、arrayToChange にはもう 1 つの要素が含まれます。

私の質問は、なぜ arrayToChange がこれらのメソッドに対して異なる反応をするのかということです。もし、shift() が内容を変更しないなら、push() も変更しないことを望みます。