immer

Ex1)

const object = {
  a: 1,
  b: 2
};

object.b = 3;

応答で配列またはオブジェクトを更新する場合、上記のコードに示すように、値を直接変更することは不変性を破る行為である.

const object ={
  a: 1,
  b: 2
};

const nextObject = {
  ...object,
  b: 3
};

素子を正しく再レンダリングし、最適化するには、この方法でのみ使用します.

💡 同様に、アレイ

push、spliceなどの関数やn個のエントリを直接変更することはできません.

spread演算子と配列の組み込み関数を使用することが望ましい.

💡しかし、プロジェクトが増え続けた瞬間から、上記の方法も不変性を一つ一つ管理して遵守することは難しい.

したがって、Immerを使用すると、不変性を破壊するコードを記述しても不変性は保たれる.

関数式更新

const [todo, setTodo] = useState({
  text: 'Hello',
  done: false
});

const onClick = useCallback (() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));
}, [/*함수형 업데이트 기존 todo를 넣어줄 필요 없다*/]);

• imerの方が使いやすいです.

const todo = {
text: 'Hello',
done: false
};

const updater = produce(draft => {
  draft.done = !draft.done ;
}); 

const nextTodo = updater(todo);

console.log(nextTodo);
// {text: 'Hello', done: true}

不変性の維持が困難な場合は、更新関数を使用してusState関数を更新できます.

💡 immerではjavascriptエンジンはproxyという機能を使用しますが、古いブラウザやreactネイティブ環境ではサポートされていません.

proxyではなくes 5 fallbackを使用すると、非常に遅くなります.

immerショー写真を参照してください

要するにimmerライブラリのデータ構造は複雑であり,不変性を保つ必要がある場合には無条件に使用しないことを推奨する.仕方がないときはimmerを使い、必要なところで使うのがベストです.