当React 16.8发布时，一个全新的功能被加入了React库 - Hook(钩子)。Hook是一种函数，它可以让你在函数组件中“挂钩”到React状态和生命周期等特性。通过使用Hook，您可以更轻松地编写复杂的函数组件，并且能够重用代码逻辑。
1. useState
首先，让我们来看看最常见的Hooks之一 - useState。useState允许我们为函数组件添加一些内部状态（state）。这意味着我们不再需要将状态抽象到一个类组件中，而是可以在函数组件中直接使用它。
下面是一个简单的计数器示例：
import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }
在上面的例子中，useState返回一个数组，第一个元素是当前状态的值，而第二个元素是一个更新该状态的函数。当我们调用setCount时，React会重新渲染组件并传入新的状态值。
2. useEffect
另一个常见的Hook是useEffect。它允许我们在函数组件中处理副作用逻辑，例如获取数据、订阅事件等。useEffect可以在组件挂载、更新或卸载时执行特定的操作。
下面是一个使用useEffect获取数据的示例：
import React, { useState, useEffect } from "react"; import axios from "axios"; function UserList() { const [users, setUsers] = useState([]); useEffect(() => { axios.get("https://jsonplaceholder.typicode.com/users").then((res) => { setUsers(res.data); }); }, []); return ( <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }
在上面的例子中，我们使用了axios库来获取用户列表数据。使用useEffect，我们可以在渲染组件后立即获取数据，并将其保存在状态中。
3. useContext
useContext是另一个常见的Hook，它允许我们使用React上下文（context）API来消费提供的变量和函数。
以下是一个使用useContext的简单示例：
import React, { useContext } from "react"; const ThemeContext = React.createContext("light"); function ThemeSwitcher() { const theme = useContext(ThemeContext); return ( <div> <p>Current theme: {theme}</p> </div> ); } function App() { return ( <ThemeContext.Provider value="dark"> <ThemeSwitcher /> </ThemeContext.Provider> ); }
在上面的例子中，我们使用createContext创建一个主题上下文对象。然后，在App组件中，我们将该上下文对象的值设置为“dark”，并将ThemeSwitcher组件包装在Provider中。最后，我们通过使用useContext来消费上下文对象的值。
4. useCallback
useCallback是另一个有用的Hook，它可以帮助我们优化性能并避免不必要的渲染。这个Hook返回一个memoized（记忆）函数，该函数仅在其依赖项发生变化时才会重新计算。
以下是一个简单的示例：
import React, { useState, useCallback } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount((c) => c + 1); }, []); return ( <div> <p>You clicked {count} times</p> <button onClick={handleClick}>Click me</button> </div>
