为什么使用Hooks?

Hooks是React框架中的特性，引入了函数组件中的状态管理和生命周期等概念，使得函数组件能够具备类组件的功能。使用Hooks可以更方便地编写和管理状态逻辑，提升代码的可读性和可维护性。

Hooks的作用是将状态管理和副作用处理从类组件转移到函数组件中。它提供了一系列的Hook函数（如useState、useEffect等），用于在函数组件中定义和使用状态，以及处理组件的副作用，如订阅数据、请求网络等操作。

使用Hooks的情况包括：

1. 函数组件需要管理组件内部的状态。
2. 函数组件需要处理副作用，如订阅、发送网络请求、更新DOM等操作。
3. 需要在函数组件中模拟类组件的生命周期方法。

以下是一个示例，展示如何使用useState和useEffect来管理状态和处理副作用：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

在上述示例中，我们使用useState Hook来创建了一个名为count的状态和对应的更新函数setCount。然后，使用useEffect Hook来处理副作用，在每次count发生改变时更新文档标题。

通过使用Hooks，我们可以在函数组件中轻松地定义和使用状态，并且能够方便地处理组件的副作用。这使得函数组件能够具备与类组件相近的功能，同时更加简洁、清晰和易于维护。