react hook打电话

React Hooks是React 16.8版本引入的一种新的功能，它允许我们在函数组件中直接使用状态管理（state）和生命周期方法，而不需要编写完整的类组件。其中，`useState`、`useEffect`等就是常见的Hook。它们通常被称为“自定义 Hook”，因为开发者可以根据需要创建自定义的Hook。

`useState` Hook用于在函数组件内部添加状态，类似于类组件中的`this.state`。通过它，我们可以定义并更新组件内的状态，并在组件渲染时基于状态变化作出响应。

`useEffect` Hook则用来处理副作用，比如数据获取、订阅事件或者定期更新某些计算结果。当依赖项改变时，effect会被重新执行，这使得我们可以在函数组件中进行异步操作并保持组件的干净。

举个例子，如果你想要在函数组件里实现类似“计数器”功能，你可以这样写：

import React, { useState } from 'react';

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

  // 使用useEffect来在每次count更改后更新UI
  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]);

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

export default Counter;

在这个例子中，每次点击按钮，`setCount`会修改状态，然后`useEffect`会在控制台打印更新后的值。