Reactアプリケーションは、アプリケーションデータを追跡するためにステータスに依存しています。ステータスは、ユーザーインタラクションとともに変化します。狀態(tài)が変更されたら、通常、ReactのsetStateメソッドを使用して実裝されるユーザーインターフェイスによって表示される狀態(tài)を更新する必要があります。

Reactの狀態(tài)は不変であるため（直接変更できません）、狀態(tài)が複雑になると、狀態(tài)を更新することは非常に扱いにくく、理解して維持するのが困難になります。

これは、Immerが登場する場所です。この記事では、Immerを使用してReact狀態(tài)管理を簡素化する方法について説明します。 Immerは、「ドラフト」（ドラフト）の概念を使用します。これは、國家自體ではなく、州のコピーとして理解できます。 Immerは、州でコピー操作を?qū)g行し、元の狀態(tài)に影響を與えることなく安全な場所で変更することを想像できます。すべての更新はドラフトで行われ、ドラフトの変更されたパーツのみが実際の狀態(tài)に更新されます。

たとえば、アプリケーションステータスは次のとおりです。

 this.state = {
  名前：「Kunle」、
  年齢：30、
  都市：「ラゴス」、
  國：「ナイジェリア」
}

ユーザーが31歳の誕生日を祝う場合、 ageの価値を更新する必要があります。 Immerを使用して、狀態(tài)コピー（ドラフト）が作成されます。

このコピーがメッセンジャーに引き渡されると想像してください?，F(xiàn)在、2つのレプリカがあります?，F(xiàn)在の狀態(tài)とKunleに渡されたドラフトレプリカです。 Kunleはドラフトのageを31に変更しました。Messengerは修正されたドラフトをアプリに返し、アプリは2つのバージョンを比較し、これが変更されたドラフトの唯一の部分であるため、 ageのみを更新します。

現(xiàn)在の狀態(tài)が直接変更されないため、この方法は不変の狀態(tài)の原則を破ることはありません。 Immerは、不変の狀態(tài)の管理を簡素化します。

実用的な例：信號機(jī)

Immerを使用して簡単な信號機(jī)のアプリケーションを構(gòu)築しましょう。

Immerを使用すると、コンポーネントコードは次のとおりです。

 const {produce} = Immer;

クラスアプリはReact.comPonentを拡張します{
  state = {
    赤：「赤」、 
    黃色：「黒」、 
    緑：「黒」、
    次：「黃色」
  };

  componentDidMount（）{
    this.interval = setinterval（（）=> this.changehandle（）、3000）;
  }

  componentwillunmount（）{
    ClearInterval（this.interval）;
  }

  Handleredlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'red';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = 'Yellow';
      }）
    ）;
  };

  handleyellowlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'black';
        draft.yellow = 'Yellow';
        draft.green = 'black';
        draft.next = 'green';
      }）
    ）;
  };

  handlegreenlight =（）=> {
    this.setState（
      プロデュース（draft => {{
        draft.red = 'black';
        draft.yellow = 'black';
        draft.green = 'green';
        draft.next = 'red';
      }）
    ）;
  };

  changehandle =（）=> {
    if（this.state.next === 'Yellow'）{
      this.handleyellowlight（）;
    } else if（this.state.next === 'green'）{
      this.handlegreenlight（）;
    } それ以外 {
      this.handleredlight（）;
    }
  };

  與える（） {
    戻る （
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    ）;
  }
}

produce 、Immerによって提供されるデフォルト関數(shù)です。これをパラメーターとしてsetStateメソッドに渡します。 produce関數(shù)は、 draftを引數(shù)として受け入れる関數(shù)を受信します。この関數(shù)內(nèi)では、 draftコピーを変更できます。

書く簡単な方法：

 const handLeLight =（state）=> {
  Return Produce（state、（draft）=> {
    draft.red = 'black';
    draft.yellow = 'black';
    draft.green = 'green';
    draft.next = 'red';
  }）;
};

//コンポーネントでの使用：
handlegreenlight =（）=> {
  const nextState = handLeLight（this.state）;
  this.setState（NextState）;
};

produce関數(shù)の引數(shù)としてdraftを受け入れる現(xiàn)在の狀態(tài)と関數(shù)を渡します。

別の例：買い物リスト

しばらくReactを使用している場合は、スプレッドオペレーターに精通している必要があります。 Immerを使用して、特にArray Stateを扱う場合は、拡張オペレーターを使用する必要はありません。

これをさらに説明するために、買い物リストアプリを作成しましょう。

コンポーネントコード：

クラスアプリはReact.comPonentを拡張します{
  // ...（コンストラクターとその他の方法）...

  handleSubmit =（e）=> {
    E.PreventDefault（）;
    const newItem = {
      ID：uuid.v4（）、
      名前：this.state.name、
      価格：this.state.price
    };
    this.setState（
      プロデュース（draft => {{
        drawt.list = draft.list.concat（newItem）;
      }）
    ）;
  };

  // ...（レンダリング方法）...
}

新製品を追加するときは、リストステータスを更新する必要があります。 setStateおよび拡張機(jī)能を使用します。

 handleSubmit =（e）=> {
  // ...
  this.setState（{list：[... this.state.list、newItem]}）;
};

複數(shù)の狀態(tài)を更新する必要がある場合、拡張オペレーターを使用することは非常に複雑になる可能性があります。 Immerを使用すると、これは非常に簡単になります。

狀態(tài)が更新された後にコールバック関數(shù)を呼び出したい場合はどうなりますか？たとえば、リスト內(nèi)のアイテムの合計(jì)価格を計(jì)算する必要があります。

 handleSubmit =（e）=> {
  // ...
  this.setState（
    プロデュース（draft => {{
      drawt.list = draft.list.concat（newItem）;
    }）、（）=> {
      this.calculateamount（this.state.list）;
    }
  ）;
};

calculateamount =（list）=> {
  合計(jì)= 0とします。
  list.foreach（item => total = item.price）;
  this.setState（
    プロデュース（draft => {{
      draft.totalamount =合計(jì);
    }）
  ）;
};

ステータスが更新され、更新されたステータスが使用された後にコールバック関數(shù)が呼び出されます。

インマーフック

use-immer Reactアプリケーションで狀態(tài)を管理できるフックです。簡単なカウンターの例で実証しましょう。

 「React」からのImport React;
「use-immer」から{useimmer}をインポートします。

const counter =（）=> {
  const [count、updatecounter] = useimmer（{value：0}）;

  function increment（）{
    updatecounter（draft => {
      draft.value;
    }）;
  }

  戻る （
    <div>
      <h1>カウンター{count.Value}</h1>
      <button onclick="{increment}">インクリメント</button>
    </div>
  ）;
};

デフォルトカウンターをエクスポートします。

useImmer useStateに似ています。ステータスと更新関數(shù)を返します。コンポーネントがロードされると、ステータス値はuseImmerに渡された値と同じです。返された更新関數(shù)を使用すると、カウンター値を増やすためのincrement関數(shù)を作成できます。

Immerは、 useReducer ： useImmerReducerに似たフックも提供します。

要約します

次のプロジェクトでImmerの使用を開始するか、現(xiàn)在のプロジェクトに徐々に適用できます。 Reactの狀態(tài)管理を簡素化します。コードの例はGitHubで見つけることができます。 （githubリンクが存在する場合は提供してください）

以上がReact狀態(tài)管理にImmerを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。