React useState的錯誤用法避坑詳解

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

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

引言

本文源于翻譯 Avoid These Common Pitfalls Of React useState 由公眾號KooFE前端團隊完成翻譯

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

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

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

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

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

冗余的 state

對于初級開發(fā)者來說，定義和使用冗余的 state 是一個比較常見的錯誤。如果一個 state 依賴了另外一個 state，就是這種典型的錯誤用法。

簡單示例

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

代碼實現(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

問題分析

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

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

但是，React state 的更新是批量更新，所以不會為每個 state 更新做單獨的渲染。

因此，在大多數(shù)情況下，性能方面的差異不大。問題在于可維護性和引入錯誤的風(fēng)險。讓我們再次看一下示例代碼：

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 時，我們都必須要更新 fullName。在更復(fù)雜的場景中，這很容易被遺漏。因此，這會導(dǎo)致代碼更難重構(gòu)，引入 bug 的可能性也會增加。

如前所述，在大多數(shù)情況下，我們不必擔(dān)心性能。但是，如果被依賴的 state 是大型的數(shù)組或需要大量的計算，則可以使用 useMemo 來做優(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

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

簡單示例

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

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

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

這段代碼中的問題是，將 item 原封不動地拷貝到了 state 中。

問題分析

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

假如，用戶能夠在 modal 彈窗中編輯這些數(shù)據(jù)。可能會是這樣的：

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

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

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

解決方案

一個更簡單的解決方案是只跟蹤選定的 id。正如你所看到的，該解決方案 “冗余的 state” 部分中的解決方案非常相似：我們只需從 id 中計算出 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

另一個常見問題是使用 useEffect 來監(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)。是不是覺得它的實現(xiàn)方式有點 hack？

問題分析

這種方法存在多個問題：

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

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 或在另一個開發(fā)人員的代碼中看到它，問問自己是否真的需要它。也許可以通過前面介紹的方法來避免這種情況。

解決方案

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

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)的另外一個常見問題是使用 useEffect 對狀態(tài)的變化做出反應(yīng)。但解決方案略有不同。

簡單示例

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

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 會偵聽 isDetailsVisible 是否變化，并相應(yīng)地觸發(fā)埋點事件。

問題分析

代碼中的問題如下：

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

解決方案

在許多情況下，可以刪除用于監(jiān)聽 state 變化的 useEffect。通常，我們可以將這些功能放在更新 state 的代碼旁邊。在這里，我們可以將 trackEvent(...) 移動到 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)您使用相互依賴的多個 state 時，這些狀態(tài)可能存在多種組合，稍有不慎就會設(shè)置出錯誤的 state，讓這些 state 呈現(xiàn)出相互矛盾的渲染結(jié)果。因此，我們需要更直觀的方式來組織和管理這些狀態(tài)組合。

簡單示例

下面是一個很基本的數(shù)據(jù)請求的示例，組件可以處于不同的狀態(tài)：要么正在加載數(shù)據(jù)，要么發(fā)生錯誤，要么已成功獲取數(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);
      });
  }, []);
  ...

問題分析

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

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

解決方案

多個狀態(tài)之間相互依賴，更推薦用 useReducer 來替代 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 });
      });
  }, []);
  ...

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

深度嵌套的 state

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

簡單示例

這里我們有一個組件，用于渲染深度嵌套的注釋。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
  };
  ...

問題分析

這種嵌套 state 的問題是，我們必須以不可變的方式更新它，否則組件不會重新渲染。上面示例中的深度嵌套注釋，我們以硬編碼的方式來實現(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"
            }
          ]
        }
      ]
    }
  ]);
};

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

解決方案

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

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)在，通過它的 ID 找到正確的數(shù)據(jù)項，并在數(shù)組中替換它就容易多了。

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

您可能感興趣的文章: