React應(yīng)用依賴(lài)狀態(tài)來(lái)追蹤應(yīng)用數(shù)據(jù)。狀態(tài)會(huì)隨著用戶(hù)交互而改變。當(dāng)狀態(tài)改變時(shí)，我們需要更新用戶(hù)界面顯示的狀態(tài)，這通常使用React的setState方法實(shí)現(xiàn)。

由于React的狀態(tài)是不可變的（不能直接修改），當(dāng)狀態(tài)變得復(fù)雜時(shí)，更新?tīng)顟B(tài)會(huì)變得非常棘手，難以理解和維護(hù)。

這就是Immer發(fā)揮作用的地方。本文將探討如何使用Immer簡(jiǎn)化React狀態(tài)管理。Immer使用“draft”（草稿）的概念，你可以把它理解為狀態(tài)的副本，而不是狀態(tài)本身。你可以想象Immer對(duì)狀態(tài)執(zhí)行了復(fù)制操作，然后在一個(gè)安全的地方進(jìn)行修改，而不會(huì)影響原始狀態(tài)。所有更新都在draft上進(jìn)行，只有draft中發(fā)生改變的部分才會(huì)更新到實(shí)際狀態(tài)中。

例如，你的應(yīng)用狀態(tài)如下：

this.state = {
  name: 'Kunle',
  age: 30,
  city: 'Lagos',
  country: 'Nigeria'
}

如果用戶(hù)慶祝31歲生日，我們需要更新age的值。使用Immer，會(huì)創(chuàng)建一個(gè)狀態(tài)副本（draft）。

想象一下，這個(gè)副本被交給一個(gè)信使，信使將副本交給Kunle?，F(xiàn)在有兩個(gè)副本：當(dāng)前狀態(tài)和交給Kunle的draft副本。Kunle將draft中的age修改為31。然后，信使將修改后的draft返回應(yīng)用，應(yīng)用比較兩個(gè)版本，只更新age，因?yàn)檫@是draft中唯一改變的部分。

這種方式不會(huì)破壞不可變狀態(tài)的原則，因?yàn)楫?dāng)前狀態(tài)不會(huì)被直接修改。Immer簡(jiǎn)化了不可變狀態(tài)的管理。

實(shí)踐示例：交通燈

讓我們用Immer構(gòu)建一個(gè)簡(jiǎn)單的交通燈應(yīng)用。

使用Immer，組件代碼如下：

const {produce} = immer;

class App extends React.Component {
  state = {
    red: 'red', 
    yellow: 'black', 
    green: 'black',
    next: "yellow"
  };

  componentDidMount() {
    this.interval = setInterval(() => this.changeHandle(), 3000);
  }

  componentWillUnmount()  {
    clearInterval(this.interval);
  }

  handleRedLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'red';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = 'yellow';
      })
    );
  };

  handleYellowLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'black';
        draft.yellow = 'yellow';
        draft.green = 'black';
        draft.next = 'green';
      })
    );
  };

  handleGreenLight = () => {
    this.setState(
      produce(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();
    } else {
      this.handleRedLight();
    }
  };

  render() {
    return (
      <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提供的默認(rèn)函數(shù)。我們將其作為參數(shù)傳遞給setState方法。produce函數(shù)接收一個(gè)函數(shù)，該函數(shù)接受draft作為參數(shù)。在這個(gè)函數(shù)內(nèi)部，我們可以修改draft副本。

更簡(jiǎn)潔的寫(xiě)法：

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);
};

我們把當(dāng)前狀態(tài)和接受draft作為參數(shù)的函數(shù)傳遞給produce函數(shù)。

另一個(gè)例子：購(gòu)物清單

如果你使用過(guò)React一段時(shí)間，你應(yīng)該熟悉擴(kuò)展運(yùn)算符（spread operator）。使用Immer，特別是處理數(shù)組狀態(tài)時(shí)，你不需要使用擴(kuò)展運(yùn)算符。

讓我們創(chuàng)建一個(gè)購(gòu)物清單應(yīng)用來(lái)進(jìn)一步說(shuō)明這一點(diǎn)。

組件代碼：

class App extends React.Component {
  // ... (constructor and other methods) ...

  handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      id: uuid.v4(),
      name: this.state.name,
      price: this.state.price
    };
    this.setState(
      produce(draft => {
        draft.list = draft.list.concat(newItem);
      })
    );
  };

  // ... (render method) ...
}

添加新商品時(shí)，我們需要更新清單狀態(tài)。使用setState和擴(kuò)展運(yùn)算符：

handleSubmit = (e) => {
  // ...
  this.setState({ list: [...this.state.list, newItem] });
};

如果需要更新多個(gè)狀態(tài)，使用擴(kuò)展運(yùn)算符會(huì)變得非常復(fù)雜。使用Immer，這變得非常簡(jiǎn)單。

如果我們想在狀態(tài)更新后調(diào)用回調(diào)函數(shù)呢？例如，我們想計(jì)算清單中商品的總價(jià)。

handleSubmit = (e) => {
  // ...
  this.setState(
    produce(draft => {
      draft.list = draft.list.concat(newItem);
    }), () => {
      this.calculateAmount(this.state.list);
    }
  );
};

calculateAmount = (list) => {
  let total = 0;
  list.forEach(item => total  = item.price);
  this.setState(
    produce(draft => {
      draft.totalAmount = total;
    })
  );
};

回調(diào)函數(shù)在狀態(tài)更新后被調(diào)用，并且使用更新后的狀態(tài)。

Immer Hooks

use-immer是一個(gè)hook，允許你在React應(yīng)用中管理狀態(tài)。讓我們用一個(gè)簡(jiǎn)單的計(jì)數(shù)器示例來(lái)演示：

import React from "react";
import {useImmer} from "use-immer";

const Counter = () => {
  const [count, updateCounter] = useImmer({ value: 0 });

  function increment() {
    updateCounter(draft => {
      draft.value  ;
    });
  }

  return (
    <div>
      <h1>Counter {count.value}</h1>
      <button onclick="{increment}">Increment</button>
    </div>
  );
};

export default Counter;

useImmer類(lèi)似于useState。它返回狀態(tài)和一個(gè)更新函數(shù)。組件加載時(shí)，狀態(tài)值與傳遞給useImmer的值相同。使用返回的更新函數(shù)，我們可以創(chuàng)建一個(gè)increment函數(shù)來(lái)增加計(jì)數(shù)器的值。

Immer還提供了一個(gè)類(lèi)似useReducer的hook：useImmerReducer。

總結(jié)

你可以開(kāi)始在你的下一個(gè)項(xiàng)目中使用Immer，或者逐步將其應(yīng)用到當(dāng)前項(xiàng)目中。它簡(jiǎn)化了React狀態(tài)管理。 代碼示例可以在GitHub上找到。（請(qǐng)?zhí)峁〨itHub鏈接，如果存在的話(huà)）

以上是使用沉浸式的反應(yīng)狀態(tài)管理的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！