javascript - 如何在功能组件上编写几个 ReactJS 状态？

Question

在发布 ReactJS 16.8 版本后，我等待我的项目有一个稳定的情况，所以现在我想从类组件完全迁移到功能组件。

但是我有一些关于新钩子(Hook) API 的问题，其中之一是如何在一个组件上编写多个状态。我读了 ReactJS docs关于多个状态，如下所示:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

现在，我的想法如下:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [state, setState] = useState({
    age: 42,
    fruit: 'banana',
    todos: [{ text: 'Learn Hooks' }],
  });

老实说，我不相信文档，文档对 API 的描述非常好，但我经历过几次，有时优秀的开发人员比文档更好地指导。现在 我想知道哪种写作类型更好？为什么？

Answer 1

两种方法都没有对错之分。您可以以两种方式使用 state 并且它会正常工作。

但我会推荐第一种方法。使用多个状态 Hook 可以轻松测试和维护状态。

维护和测试深度嵌套的对象总是很困难。

对于每个状态更新的第二种方法，您必须提供完整的状态对象，否则只保留给定的对象并忽略所有先前的值。

You could create your own custom hook and handle all the state in the custom hook.

您可以阅读有关自定义 Hook 的更多信息 here .