Javascript 如何在功能组件上写入多个ReactJS状态？

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

但是我对新的hooks-API有一些问题，其中之一就是如何在一个组件上编写多个状态。我阅读了关于多个州的文章，如下所示：

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

现在，我的想法如下：

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的描述非常好，但我经历了好几次，有时优秀的开发人员指导比文档更好。现在我想知道哪种书写方式更好？为什么呢？

这两种方法都没有对错之分。您可以以两种方式使用state，它会很好地工作

但我会推荐第一种方法。使用多个状态挂钩很容易测试和维护状态

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

对于第二种方法，在每次状态更新时，您必须给出完整的状态对象，否则，只保留给定的对象并忽略以前的所有值

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

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