React useState() でのオブジェクト値の処理

React の useState とは何ですか?

useState は、機能コンポーネントがローカル状態を管理および更新できるようにする React フックです。

ただし、状態自体を直接変更するのではなく、useState() を通じて状態を更新する必要があります。

useStateの基本例

const [count, setCount] = useState(0);

setCount(count++)
console.log(count) // 1

useState のオブジェクト状態の問題

JavaScript にはスタックとヒープという 2 つのデータを保存できる場所があり、これはプリミティブ値と参照の話に関係しています。

プリミティブ値と参照

スタックは、データのサイズが固定されたプリミティブ値（文字列、数値、ブール値、未定義、null）などの静的データを保存するために Javascript で使用されます。一方、
ヒープは、参照 (オブジェクトや関数) などの動的データを保存するために使用されます。

プリミティブ値の値は単純にスタックに格納されますが、参照の内容自体はスタックから参照されるヒープに格納されます。

これにより、既存のオブジェクトを参照する新しく割り当てられた値が同一であると解釈される状況が作成されます。

間違った例を見てみましょう?:

const [state, setState] = useState([1,2]);

const temp = state
temp.push(3)
useState(temp)

temp と state はどちらもヒープ内の同じ値を参照するため、事実上同一です。これは、再レンダリングをトリガーするには新しいオブジェクトまたは値を必要とする useState のルールに違反します。 ?

どうやって解決すればいいでしょうか？

⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️

スプレッド構文

[...[]]

ヒープ内に値の別のコピーを作成するのに役立ちます。

const a = [1,2]
const b = a
console.log(Object.is(a,b)) // true

const c = [...a]
console.log(Object.is(a,c)) // false

出来上がり?

const [state, setState] = useState([1,2])
const temp = [...state].push(3)
setData(temp);

現在、値 temp は元のオブジェクトとは異なり、状態と同じ参照を共有しなくなりました。

インプレース関数のもう 1 つの落とし穴

sort() などのインプレース関数は、データ構造の別のコピーを作成せずに、データをその場で変更します。

a = [1,3]
a.sort((b,c) => c-b)
console.log(a) // => [3,1]

ご覧のとおり、a の値が変更されています。

また間違った例がありますか?:

const [state, setState] = useState([])

const sortOrder = () => {
    state.sort((a, b) => a-b)
    setState(state);
  }

状態はルールに反して変化しています。 ?

スプレッド構文を使用した解決策は次のとおりです。

const [state setState] = useState([])

const sortOrder = () => {
   const newState = [...data].sort((a, b) => a-b)
    setState(newState);
  }

しかし、スプレッド構文の結論に達する前に、ドキュメントを参照して最新の更新情報を入手することを忘れないでください。

書類を確認する

機能がアップデートされる可能性があります。

たとえば、toSorted() は 2023 年に新たに導入され、入力データのコピー バージョンを返します?

const [state, newState] = useState([])

const sortOrder = () => {
   const newState = state.toSorted((a, b) => a-b)
   newState(newState);
  }

AI は最新の情報をキャッチするのが苦手なので、この従来の方法論には依然として価値があります!

結論

スプレッド構文 [...[]] を使ってみましょう
ただし、忘れずにドキュメントも参照してください。

参照

https://felixgerschau.com/javascript-memory-management/
https://react.dev/reference/react/useState

以上がReact useState() でのオブジェクト値の処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。