prop として渡された配列には変更が反映されません

Question

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

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

リーリー

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

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

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

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

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

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

Answer 1

リーリー リーリー リーリー

コード スニペットの動作は、レンダリング プロセスを幅優先アルゴリズムと考えると説明できます。

JSX は次のように変換します:

リーリー

次の JavaScript を入力します:

リーリー

React.createElement(ChildShowArray, { array: Letter }) ChildShowArray コンポーネントをすぐに呼び出さない構造体を作成します。レンダラーが要求した場合にのみ実行される、ある種の中間構造/オブジェクトが作成されます。

{...} (JSX コンテキスト) 内に配置された JavaScript はパラメーターとして直接渡されるため、直接解析されます。これは、子コンポーネントのコードが実行される前に、Parent 内のすべての {JSON.stringify(letters)} が実行されることを意味します。

親構造の構築が完了すると、レンダラーは各中間構造/オブジェクトにアクセスし、レンダリングを依頼します。これは上から下に行われるため、最初の ChildShowArray レンダリングでも完全な配列が表示されます。次に、ChildChangeArray をレンダリングし、最初の要素を削除します。 2 番目の ChildShowArray レンダリングはこの変更を反映しており、最初の要素なしでレンダリングされます。

shift() は letters の内容を変更しますが、呼び出された時点では、Parent の内容はすでにレンダリングされており、変更されないことに注意してください。 。この変更は、次回レンダリングされるとき (スニペットの [再レンダリング] ボタンをクリックする) に Parent に影響します。また、同じ配列参照を使用するその下にある他の子コンポーネントのレンダリングにも影響します。

Answer 2

問題が何なのか完全にはわかりませんが、ここでは推測を交えるつもりなので、ここにコメントを残してください。投票前に変更します。

これを子コンポーネントで試してみるとよいと思います:

リーリー

次に、「data」を使用して jsx

の出力にマッピングします。

次に、親コンポーネントで arrayToChange をシフトします。 useEffect は、配列の長さが変更されたときに起動される「オブザーバー」と考えることができます。