Question

发布ReactJS 16.8版本后，我等待项目的稳定状态，因此现在我想从类组件完全迁移到功能组件。

但是我对新的钩子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

两种方法都没有对与错。您可以通过两种方式使用状态，它将可以正常工作。

但是我建议第一种方法。使用多个状态挂钩可以轻松测试和维护状态。

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

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

您可以创建自己的定制钩子，并处理定制钩子中的所有状态。

您可以阅读有关自定义挂钩here的更多信息。

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

1 个答案: