学无先后，达者为师

网站首页 编程语言 正文

React useState的错误用法避坑详解_React

作者：KooFE   更新时间： 2023-03-01 编程语言

引言

本文源于翻译 Avoid These Common Pitfalls Of React useState 由公众号KooFE前端团队完成翻译

useState 是我们使用最频繁的 React hook，在代码中随处可见，但是也经常会出现一些错误的用法。

或许你已经经历过这些错误的用法，但是可能还没有意识到这是错误，比如写出了一些冗余的、重复的、矛盾的 state，让你不得不额外使用 useEffect 来处理它们。由于这些错误用法的存在，会让代码的可读性变差，提高了代码的维护成本。

了解这些易犯的错误，可以让我们获得如下收益：

  • 代码更容易阅读和维护
  • 减少代码出 Bug 的可能性
  • 降低代码的复杂程度

在本文中，将介绍一些关于 useState 的常见错误，以便在今后的工作中避免这些错误。

冗余的 state

对于初级开发者来说，定义和使用冗余的 state 是一个比较常见的错误。如果一个 state 依赖了另外一个 state，就是这种典型的错误用法。

简单示例

下面是一个简单的组件，允许用户编辑自己的姓名，其中第一个输入框是用户的姓氏，后一个输入框是用户的名字，然后将姓名组合在一起渲染在输入框的下面。

代码实现如下：

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 会导致额外的渲染周期。

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

但是，React state 的更新是批量更新，所以不会为每个 state 更新做单独的渲染。

因此，在大多数情况下，性能方面的差异不大。问题在于可维护性和引入错误的风险。让我们再次看一下示例代码：

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。在更复杂的场景中，这很容易被遗漏。因此，这会导致代码更难重构，引入 bug 的可能性也会增加。

如前所述，在大多数情况下，我们不必担心性能。但是，如果被依赖的 state 是大型的数组或需要大量的计算，则可以使用 useMemo 来做优化处理。

解决方案

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

重复的 state

在多个 state 中存在重复的数据，也是一个比较常见的错误。通常在做数据的转换、排序或过滤时会遇到这种情况。另一种常见情况是选择展示不同的数据，比如接下来介绍的例子。

简单示例

这个组件用于显示项目列表，用户可以单击相应的按钮来打开 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 中。

问题分析

在上面的代码中，这种重复的数据违反了单一数据源原则。事实上，一旦用户选择了任何一项，我们就会出现两个数据源：selectedItem 状态和 items 数组中的数据。

假如，用户能够在 modal 弹窗中编辑这些数据。可能会是这样的：

  • 用户在 modal 弹窗中更改数据并提交
  • 将向服务器发送请求并更新数据库中的 item
  • 前端更新 item 数据（通过服务器的响应或重新请求 items 列表）。
  • 前端使用新的 items 数组重新渲染。
  • 现在的问题是：DuplicateState 组件内部发生了什么？

这就是问题所在。selectedItem 状态仍将包含旧数据。它将不同步。你可以想象，在更复杂的情况下，这可能会成为一个令人讨厌的 bug。

当然，我们可以写代码来实现 selectedItem 状态同步。但我们不得不使用 useEffect 来监听 items 数组中的变化。

解决方案

一个更简单的解决方案是只跟踪选定的 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 来监听变量的变化。

简单示例

我们继续使用上一节的示例：

在组件中，当 items 发生变化后，使用 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 状态。是不是觉得它的实现方式有点 hack？

问题分析

这种方法存在多个问题：

  • useEffect 不容易阅读和理解。因此，使用 useEffect 的次数越少越好。
  • 在 useEffect 中更新 state 会导致额外的渲染。虽然不会引起性能方面的大问题，但也需要考虑。
  • 在代码中，我们在 selectedItem 状态和 items 属性之间引入了某种隐藏的关系。在阅读或更改代码时，这很容易错过。
  • 在正确的时间触发 useEffect 中的代码可能很困难。在这种模式中，我们经常要额外引入其他解决方法，例如避免在第一次渲染时运行代码。下面是一个示例：
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 或在另一个开发人员的代码中看到它，问问自己是否真的需要它。也许可以通过前面介绍的方法来避免这种情况。

解决方案

您可能已经猜到了：上一节的解决方案也帮助我们删除 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 监听 state 变化

与上一节相关的另外一个常见问题是使用 useEffect 对状态的变化做出反应。但解决方案略有不同。

简单示例

这是一个显示产品的组件。用户可以通过单击按钮显示或隐藏产品详细信息。无论何时显示或隐藏产品信息，我们都会触发一个动作（在本例中，会触发一个埋点数据上报）。

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 是否变化，并相应地触发埋点事件。

问题分析

代码中的问题如下：

  • useEffect通常不容易理解。
  • 它可能会导致不必要的渲染周期（如果在效果内部更新了状态）。
  • 很容易引入与渲染生命周期相关的错误。事实上，这段代码在初始渲染期间运行trackEvent，这会导致一个 bug。
  • 它将影响与实际原因分开。在这段代码中，我们看到 trackEvent 正在运行，是因为 isDetailsVisible 发生了更改。但真正的原因是用户按下了 “显示详细信息” 按钮。

解决方案

在许多情况下，可以删除用于监听 state 变化的 useEffect。通常，我们可以将这些功能放在更新 state 的代码旁边。在这里，我们可以将 trackEvent(...) 移动到 toggleDetails 函数中。

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

当您使用相互依赖的多个 state 时，这些状态可能存在多种组合，稍有不慎就会设置出错误的 state，让这些 state 呈现出相互矛盾的渲染结果。因此，我们需要更直观的方式来组织和管理这些状态组合。

简单示例

下面是一个很基本的数据请求的示例，组件可以处于不同的状态：要么正在加载数据，要么发生错误，要么已成功获取数据。

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);
      });
  }, []);
  ...

问题分析

这种方法的问题是，如果我们不小心，我们可能会产生有矛盾的 state。例如，在上面的示例中，当发生错误时，我们可能忘记将 isLoading 设置为 false。

对于哪些 state 是允许组合的，也是很难理解的。在上面的例子中，理论上我们可以有 8 种不同的 state 组合。但你不能很直观的看到哪些状态组合是真正存在的。

解决方案

多个状态之间相互依赖，更推荐用 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 个可能的组件状态（“FETCH”、“SUCCESS”、“ERROR”和初始状态）。

深度嵌套的 state

我们这里提到的最后一个常见问题是（深度）嵌套对象的 state。如果我们只是渲染数据，这可能不存在什么问题。但是，一旦开始更新嵌套数据项，就会遇到一些麻烦。

简单示例

这里我们有一个组件，用于渲染深度嵌套的注释。JSX 在这里并不重要，所以省略了，我们假设 updateComment 是绑定到按钮上的回调函数。

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 的问题是，我们必须以不可变的方式更新它，否则组件不会重新渲染。上面示例中的深度嵌套注释，我们以硬编码的方式来实现：

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

这种实现方式非常复杂。

解决方案

与深度嵌套的 state 不同，使用扁平的数据结构要容易得多。我们可以为每一个数据项增加 ID 字段，通过 ID 之间相互引用来描述嵌套关系。代码看起来像这样：

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

现在，通过它的 ID 找到正确的数据项，并在数组中替换它就容易多了。

原文链接：https://juejin.cn/post/7179613872855187493

相关推荐

栏目分类
最近更新
Copyright © 2025   AB教程网    免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站由    提供CDN加速