React useState的錯(cuò)誤用法避坑詳解

更新時(shí)間：2023年01月12日 09:12:24 作者：KooFE

這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

本文源于翻譯 Avoid These Common Pitfalls Of React useState 由公眾號(hào)KooFE前端團(tuán)隊(duì)完成翻譯

useState 是我們使用最頻繁的 React hook，在代碼中隨處可見，但是也經(jīng)常會(huì)出現(xiàn)一些錯(cuò)誤的用法。

或許你已經(jīng)經(jīng)歷過(guò)這些錯(cuò)誤的用法，但是可能還沒有意識(shí)到這是錯(cuò)誤，比如寫出了一些冗余的、重復(fù)的、矛盾的 state，讓你不得不額外使用 useEffect 來(lái)處理它們。由于這些錯(cuò)誤用法的存在，會(huì)讓代碼的可讀性變差，提高了代碼的維護(hù)成本。

了解這些易犯的錯(cuò)誤，可以讓我們獲得如下收益：

代碼更容易閱讀和維護(hù)
減少代碼出 Bug 的可能性
降低代碼的復(fù)雜程度

在本文中，將介紹一些關(guān)于 useState 的常見錯(cuò)誤，以便在今后的工作中避免這些錯(cuò)誤。

冗余的 state

對(duì)于初級(jí)開發(fā)者來(lái)說(shuō)，定義和使用冗余的 state 是一個(gè)比較常見的錯(cuò)誤。如果一個(gè) state 依賴了另外一個(gè) state，就是這種典型的錯(cuò)誤用法。

簡(jiǎn)單示例

下面是一個(gè)簡(jiǎn)單的組件，允許用戶編輯自己的姓名，其中第一個(gè)輸入框是用戶的姓氏，后一個(gè)輸入框是用戶的名字，然后將姓名組合在一起渲染在輸入框的下面。

代碼實(shí)現(xiàn)如下：

import { useState } from "react";
function RedundantState() {
  const [firstName, setFirstName] = useState(""); // 姓氏
  const [lastName, setLastName] = useState(""); // 名字
  const [fullName, setFullName] = useState(""); // 姓名
  const onChangeFirstName = (event) => {
    setFirstName(event.target.value);
    setFullName(`${event.target.value} ${lastName}`);
  };
  const onChangeLastName = (event) => {
    setLastName(event.target.value);
    setFullName(`${firstName} ${event.target.value}`);
  };
  return (
    <>
      <form>
        <input
          value={firstName}
          onChange={onChangeFirstName}
          placeholder="First Name"
        />
        <input
          value={lastName}
          onChange={onChangeLastName}
          placeholder="Last Name"
        />
      </form>
      <div>Full name: {fullName}</div>
    </>
  );
}

很明顯，這段代碼中的 fullName 是冗余的 state

問(wèn)題分析

可能你會(huì)說(shuō)，先后依次更新 firstName 和 fullName 會(huì)導(dǎo)致額外的渲染周期。

const onChangeFirstName = (event) => {
  setFirstName(event.target.value);
  setFullName(`${event.target.value} ${lastName}`);
};

但是，React state 的更新是批量更新，所以不會(huì)為每個(gè) state 更新做單獨(dú)的渲染。

因此，在大多數(shù)情況下，性能方面的差異不大。問(wèn)題在于可維護(hù)性和引入錯(cuò)誤的風(fēng)險(xiǎn)。讓我們?cè)俅慰匆幌率纠a：

const onChangeFirstName = (event) => {
  setFirstName(event.target.value);
  setFullName(`${event.target.value} ${lastName}`);
};
const onChangeLastName = (event) => {
  setLastName(event.target.value);
  setFullName(`${firstName} ${event.target.value}`);
};

每次更新firstName 或 lastName 時(shí)，我們都必須要更新 fullName。在更復(fù)雜的場(chǎng)景中，這很容易被遺漏。因此，這會(huì)導(dǎo)致代碼更難重構(gòu)，引入 bug 的可能性也會(huì)增加。

如前所述，在大多數(shù)情況下，我們不必?fù)?dān)心性能。但是，如果被依賴的 state 是大型的數(shù)組或需要大量的計(jì)算，則可以使用 useMemo 來(lái)做優(yōu)化處理。

解決方案

fullName 可以由 firstName 和 lastName 直接拼接而成。

export function RedundantState() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const fullName = `${firstName} ${lastName}`;
  ...
  return (
    <>
      <form>
        ...
      </form>
      <div>Full name: {fullName}</div>
    </>
  );
}

重復(fù)的 state

在多個(gè) state 中存在重復(fù)的數(shù)據(jù)，也是一個(gè)比較常見的錯(cuò)誤。通常在做數(shù)據(jù)的轉(zhuǎn)換、排序或過(guò)濾時(shí)會(huì)遇到這種情況。另一種常見情況是選擇展示不同的數(shù)據(jù)，比如接下來(lái)介紹的例子。

簡(jiǎn)單示例

這個(gè)組件用于顯示項(xiàng)目列表，用戶可以單擊相應(yīng)的按鈕來(lái)打開 modal 彈窗。

在下面的代碼中就存在這種錯(cuò)誤用法。

import { useState } from "react";
// const items = [
//   {
//     id: "item-1",
//     text: "Item 1",
//   },
//   ...
// ]
function DuplicateState({ items }) {
  const [selectedItem, setSelectedItem] = useState();
  const onClickItem = (item) => {
    setSelectedItem(item);
  };
  return (
    <>
      {selectedItem && <Modal item={selectedItem} />}
      <ul>
        {items.map((row) => (
          <li key={row.id}>
            {row.text}
            <button onClick={() => onClickItem(row)}>Open</button>
          </li>
        ))}
      </ul>
    </>
  );
}

這段代碼中的問(wèn)題是，將 item 原封不動(dòng)地拷貝到了 state 中。

問(wèn)題分析

在上面的代碼中，這種重復(fù)的數(shù)據(jù)違反了單一數(shù)據(jù)源原則。事實(shí)上，一旦用戶選擇了任何一項(xiàng)，我們就會(huì)出現(xiàn)兩個(gè)數(shù)據(jù)源：selectedItem 狀態(tài)和 items 數(shù)組中的數(shù)據(jù)。

假如，用戶能夠在 modal 彈窗中編輯這些數(shù)據(jù)?？赡軙?huì)是這樣的：

用戶在 modal 彈窗中更改數(shù)據(jù)并提交
將向服務(wù)器發(fā)送請(qǐng)求并更新數(shù)據(jù)庫(kù)中的 item
前端更新 item 數(shù)據(jù)（通過(guò)服務(wù)器的響應(yīng)或重新請(qǐng)求 items 列表）。
前端使用新的 items 數(shù)組重新渲染。
現(xiàn)在的問(wèn)題是：DuplicateState 組件內(nèi)部發(fā)生了什么？

這就是問(wèn)題所在。selectedItem 狀態(tài)仍將包含舊數(shù)據(jù)。它將不同步。你可以想象，在更復(fù)雜的情況下，這可能會(huì)成為一個(gè)令人討厭的 bug。

當(dāng)然，我們可以寫代碼來(lái)實(shí)現(xiàn) selectedItem 狀態(tài)同步。但我們不得不使用 useEffect 來(lái)監(jiān)聽 items 數(shù)組中的變化。

解決方案

一個(gè)更簡(jiǎn)單的解決方案是只跟蹤選定的 id。正如你所看到的，該解決方案 “冗余的 state” 部分中的解決方案非常相似：我們只需從 id 中計(jì)算出 selectedItem 變量。

// const items = [
//   {
//     id: "item-1",
//     text: "Item 1",
//   },
//   ...
// ]
function DuplicateState({ items }) {
  const [selectedItemId, setSelectedItemId] = useState();
  const selectedItem = items.find(({ id }) => id === selectedItemId);
  const onClickItem = (itemId) => {
    setSelectedItemId(itemId);
  };
  return (
    <>
      {selectedItem && <Modal item={selectedItem} />}
      <ul>
        {items.map((row) => (
          <li key={row.id}>
            {row.text}
            <button onClick={() => onClickItem(row.id)}>Open</button>
          </li>
        ))}
      </ul>
    </>
  );
}

使用 useEffect 更新 state

另一個(gè)常見問(wèn)題是使用 useEffect 來(lái)監(jiān)聽變量的變化。

簡(jiǎn)單示例

我們繼續(xù)使用上一節(jié)的示例：

在組件中，當(dāng) items 發(fā)生變化后，使用 useEffect 同步給 selectedItem。

import { useEffect, useState } from "react";
// const items = [
//   {
//     id: "item-1",
//     text: "Item 1",
//   },
//   ...
// ]
function DuplicateState({ items }) {
  const [selectedItem, setSelectedItem] = useState();
  useEffect(() => {
    if (selectedItem) {
      setSelectedItem(items.find(({ id }) => id === selectedItem.id));
    }
  }, [items]);
  const onClickItem = (item) => {
    setSelectedItem(item);
  };
  return (
    <>
      {selectedItem && <Modal item={selectedItem} />}
      <ul>
        {items.map((row) => (
          <li key={row.id}>
            {row.text}
            <button onClick={() => onClickItem(row)}>Open</button>
          </li>
        ))}
      </ul>
    </>
  );
}

這段代碼能夠正常工作，并同步保持 selectedItem 狀態(tài)。是不是覺得它的實(shí)現(xiàn)方式有點(diǎn) hack？

問(wèn)題分析

這種方法存在多個(gè)問(wèn)題：

useEffect 不容易閱讀和理解。因此，使用 useEffect 的次數(shù)越少越好。
在 useEffect 中更新 state 會(huì)導(dǎo)致額外的渲染。雖然不會(huì)引起性能方面的大問(wèn)題，但也需要考慮。
在代碼中，我們?cè)?selectedItem 狀態(tài)和 items 屬性之間引入了某種隱藏的關(guān)系。在閱讀或更改代碼時(shí)，這很容易錯(cuò)過(guò)。
在正確的時(shí)間觸發(fā) useEffect 中的代碼可能很困難。在這種模式中，我們經(jīng)常要額外引入其他解決方法，例如避免在第一次渲染時(shí)運(yùn)行代碼。下面是一個(gè)示例：

function DuplicateState({ items }) {
  const [selectedItem, setSelectedItem] = useState();
  const firstRender = useRef(true);
  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }
    setSelectedItem(items.find(({ id }) => id === selectedItem.id));
  }, [items]);
  ...

如果你想使用 useEffect 或在另一個(gè)開發(fā)人員的代碼中看到它，問(wèn)問(wèn)自己是否真的需要它。也許可以通過(guò)前面介紹的方法來(lái)避免這種情況。

解決方案

您可能已經(jīng)猜到了：上一節(jié)的解決方案也幫助我們刪除 useEffect。如果我們只存儲(chǔ)所選項(xiàng)目的 ID 而不是整個(gè)對(duì)象，那么就沒有什么可同步的。

import { useState } from "react";
// const items = [
//   {
//     id: "item-1",
//     text: "Item 1",
//   },
//   ...
// ]
function DuplicateState({ items }) {
  const [selectedItemId, setSelectedItemId] = useState();
  const selectedItem = items.find(({ id }) => id === selectedItemId);
  const onClickItem = (id) => {
    setSelectedItem(id);
  };
  return (
    <>
      {selectedItem && <Modal item={selectedItem} />}
      <ul>
        {items.map((row) => (
          <li key={row.id}>
            {row.text}
            <button onClick={() => onClickItem(row.id)}>Open</button>
          </li>
        ))}
      </ul>
    </>
  );
}

使用 useEffect 監(jiān)聽 state 變化

與上一節(jié)相關(guān)的另外一個(gè)常見問(wèn)題是使用 useEffect 對(duì)狀態(tài)的變化做出反應(yīng)。但解決方案略有不同。

簡(jiǎn)單示例

這是一個(gè)顯示產(chǎn)品的組件。用戶可以通過(guò)單擊按鈕顯示或隱藏產(chǎn)品詳細(xì)信息。無(wú)論何時(shí)顯示或隱藏產(chǎn)品信息，我們都會(huì)觸發(fā)一個(gè)動(dòng)作（在本例中，會(huì)觸發(fā)一個(gè)埋點(diǎn)數(shù)據(jù)上報(bào)）。

import { useEffect, useState } from "react";
function ProductView({ name, details }) {
  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
  useEffect(() => {
    trackEvent({ event: "Toggle Product Details", value: isDetailsVisible });
  }, [isDetailsVisible]);
  const toggleDetails = () => {
    setIsDetailsVisible(!isDetailsVisible);
  };
  return (
    <div>
      {name}
      <button onClick={toggleDetails}>Show details</button>
      {isDetailsVisible && <ProductDetails {...details} />}
    </div>
  );
}

代碼中的 useEffect 會(huì)偵聽 isDetailsVisible 是否變化，并相應(yīng)地觸發(fā)埋點(diǎn)事件。

問(wèn)題分析

代碼中的問(wèn)題如下：

useEffect通常不容易理解。
它可能會(huì)導(dǎo)致不必要的渲染周期（如果在效果內(nèi)部更新了狀態(tài)）。
很容易引入與渲染生命周期相關(guān)的錯(cuò)誤。事實(shí)上，這段代碼在初始渲染期間運(yùn)行trackEvent，這會(huì)導(dǎo)致一個(gè) bug。
它將影響與實(shí)際原因分開。在這段代碼中，我們看到 trackEvent 正在運(yùn)行，是因?yàn)?isDetailsVisible 發(fā)生了更改。但真正的原因是用戶按下了 “顯示詳細(xì)信息” 按鈕。

解決方案

在許多情況下，可以刪除用于監(jiān)聽 state 變化的 useEffect。通常，我們可以將這些功能放在更新 state 的代碼旁邊。在這里，我們可以將 trackEvent(...) 移動(dòng)到 toggleDetails 函數(shù)中。

function ProductView({ name, details }) {
  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
  const toggleDetails = () => {
    setIsDetailsVisible(!isDetailsVisible);
    trackEvent({ event: "Toggle Product Details", value: !isDetailsVisible });
  };
  return (
    <div>
      {name}
      <button onClick={toggleDetails}>Show details</button>
      {isDetailsVisible && <ProductDetails {...details} />}
    </div>
  );
}

矛盾的 state

當(dāng)您使用相互依賴的多個(gè) state 時(shí)，這些狀態(tài)可能存在多種組合，稍有不慎就會(huì)設(shè)置出錯(cuò)誤的 state，讓這些 state 呈現(xiàn)出相互矛盾的渲染結(jié)果。因此，我們需要更直觀的方式來(lái)組織和管理這些狀態(tài)組合。

簡(jiǎn)單示例

下面是一個(gè)很基本的數(shù)據(jù)請(qǐng)求的示例，組件可以處于不同的狀態(tài)：要么正在加載數(shù)據(jù)，要么發(fā)生錯(cuò)誤，要么已成功獲取數(shù)據(jù)。

export function ContradictingState() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsLoading(true);
    setError(null);
    fetchData()
      .then((data) => {
        setData(data);
        setIsLoading(false);
      })
      .catch((error) => {
        setIsLoading(false);
        setData(null);
        setError(error);
      });
  }, []);
  ...

問(wèn)題分析

這種方法的問(wèn)題是，如果我們不小心，我們可能會(huì)產(chǎn)生有矛盾的 state。例如，在上面的示例中，當(dāng)發(fā)生錯(cuò)誤時(shí)，我們可能忘記將 isLoading 設(shè)置為 false。

對(duì)于哪些 state 是允許組合的，也是很難理解的。在上面的例子中，理論上我們可以有 8 種不同的 state 組合。但你不能很直觀的看到哪些狀態(tài)組合是真正存在的。

解決方案

多個(gè)狀態(tài)之間相互依賴，更推薦用 useReducer 來(lái)替代 useState。

const initialState = {
  data: [],
  error: null,
  isLoading: false
};
function reducer(state, action) {
  switch (action.type) {
    case "FETCH":
      return {
        ...state,
        error: null,
        isLoading: true
      };
    case "SUCCESS":
      return {
        ...state,
        error: null,
        isLoading: false,
        data: action.data
      };
    case "ERROR":
      return {
        ...state,
        isLoading: false,
        error: action.error
      };
    default:
      throw new Error(`action "${action.type}" not implemented`);
  }
}
export function NonContradictingState() {
  const [state, dispatch] = useReducer(reducer, initialState);
  useEffect(() => {
    dispatch({ type: "FETCH" });
    fetchData()
      .then((data) => {
        dispatch({ type: "SUCCESS", data });
      })
      .catch((error) => {
        dispatch({ type: "ERROR", error });
      });
  }, []);
  ...

這樣一來(lái)，就可以大大減少了我們的理解成本。我們可以很直觀地看到我們有 3 個(gè)動(dòng)作和 4 個(gè)可能的組件狀態(tài)（“FETCH”、“SUCCESS”、“ERROR”和初始狀態(tài)）。

深度嵌套的 state

我們這里提到的最后一個(gè)常見問(wèn)題是（深度）嵌套對(duì)象的 state。如果我們只是渲染數(shù)據(jù)，這可能不存在什么問(wèn)題。但是，一旦開始更新嵌套數(shù)據(jù)項(xiàng)，就會(huì)遇到一些麻煩。

簡(jiǎn)單示例

這里我們有一個(gè)組件，用于渲染深度嵌套的注釋。JSX 在這里并不重要，所以省略了，我們假設(shè) updateComment 是綁定到按鈕上的回調(diào)函數(shù)。

function NestedComments() {
  const [comments, setComments] = useState([
    {
      id: "1",
      text: "Comment 1",
      children: [
        {
          id: "11",
          text: "Comment 1 1"
        },
        {
          id: "12",
          text: "Comment 1 2"
        }
      ]
    },
    {
      id: "2",
      text: "Comment 2"
    },
    {
      id: "3",
      text: "Comment 3",
      children: [
        {
          id: "31",
          text: "Comment 3 1",
          children: [
            {
              id: "311",
              text: "Comment 3 1 1"
            }
          ]
        }
      ]
    }
  ]);
  const updateComment = (id, text) => {
    // this gets complicated
  };
  ...

問(wèn)題分析

這種嵌套 state 的問(wèn)題是，我們必須以不可變的方式更新它，否則組件不會(huì)重新渲染。上面示例中的深度嵌套注釋，我們以硬編碼的方式來(lái)實(shí)現(xiàn)：

const updateComment = (id, text) => {
  setComments([
    ...comments.slice(0, 2),
    {
      ...comments[2],
      children: [
        {
          ...comments[2].children[0],
          children: [
            {
              ...comments[2].children[0].children[0],
              text: "New comment 311"
            }
          ]
        }
      ]
    }
  ]);
};

這種實(shí)現(xiàn)方式非常復(fù)雜。

解決方案

與深度嵌套的 state 不同，使用扁平的數(shù)據(jù)結(jié)構(gòu)要容易得多。我們可以為每一個(gè)數(shù)據(jù)項(xiàng)增加 ID 字段，通過(guò) ID 之間相互引用來(lái)描述嵌套關(guān)系。代碼看起來(lái)像這樣：

function FlatCommentsRoot() {
  const [comments, setComments] = useState([
    {
      id: "1",
      text: "Comment 1",
      children: ["11", "12"],
    },
    {
      id: "11",
      text: "Comment 1 1"
    },
    {
      id: "12",
      text: "Comment 1 2"
    },
    {
      id: "2",
      text: "Comment 2",
    },
    {
      id: "3",
      text: "Comment 3",
      children: ["31"],
    },
    {
      id: "31",
      text: "Comment 3 1",
      children: ["311"]
    },
    {
      id: "311",
      text: "Comment 3 1 1"
    }
  ]);
  const updateComment = (id, text) => {
    const updatedComments = comments.map((comment) => {
      if (comment.id !== id) {
        return comment;
      }
      return {
        ...comment,
        text
      };
    });
    setComments(updatedComments);
  };
  ...

現(xiàn)在，通過(guò)它的 ID 找到正確的數(shù)據(jù)項(xiàng)，并在數(shù)組中替換它就容易多了。

以上就是React useState的錯(cuò)誤用法避坑詳解的詳細(xì)內(nèi)容，更多關(guān)于React useState錯(cuò)誤避坑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: