重思 useState：你可能用不到你以为的那么多次

2023-10-22 01:13:02

重思 useState：你可能用不到你以为的那么多次

导言

useState 是 React 开发者最熟悉的 Hook 之一。它允许我们在函数组件中管理状态。然而，许多开发人员不知道的是，useState 并非在所有情况下都必不可少。事实上，我们可以使用替代方案来实现相同的效果，而无需 useState。在本文中，我们将探讨一些你可能用不到 useState 的情况，并提供替代方案来管理状态。

当状态只在组件内部使用时

如果你有一个只在组件内部使用的状态，那么就没有必要使用 useState 来管理它。你可以直接在组件中定义一个变量来存储此状态，然后在组件内部使用它。例如，如果你有一个需要跟踪用户输入文本的组件，则可以直接在组件中定义一个变量来存储此文本，然后在组件内部使用它：

const MyComponent = () => {
  let textInput = "";

  const handleChange = (event) => {
    textInput = event.target.value;
  };

  return (
    <input type="text" onChange={handleChange} />
  );
};

当状态只在组件生命周期中使用时

如果你有一个只在组件生命周期中使用的状态，那么就没有必要使用 useState 来管理它。你可以直接在组件的生命周期函数中定义一个变量来存储此状态，然后在组件生命周期中使用它。例如，如果你有一个需要在组件挂载时获取一些数据，然后在组件卸载时释放这些数据的组件，则可以直接在组件的生命周期函数中定义一个变量来存储这些数据，然后在组件生命周期中使用它：

class MyComponent extends React.Component {
  componentDidMount() {
    let data = fetchData();

    this.setState({ data });
  }

  componentWillUnmount() {
    releaseData(this.state.data);
  }

  render() {
    return (
      <div>{this.state.data}</div>
    );
  }
}

当状态可以在父组件中管理时

如果你有一个可以在父组件中管理的状态，那么就没有必要在子组件中使用 useState 来管理它。你可以直接将此状态从父组件传递给子组件，然后在子组件中使用它。例如，如果你有一个需要管理用户列表的父组件，然后在子组件中显示这些用户，则可以直接将用户列表从父组件传递给子组件，然后在子组件中使用它：

const ParentComponent = () => {
  const [users, setUsers] = useState([]);

  return (
    <div>
      <ChildComponent users={users} />
    </div>
  );
};

const ChildComponent = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};