React Hooks 是 React v16.8 中新增的一项功能，它能让函数组件拥有类组件中的一些特性，如状态和生命周期等。
以下是几个基本的 React Hooks：
useState
useState 是最基础的 Hook 之一，它可以让你在函数组件中保存和更新状态。useState 接收一个初始状态作为参数，并返回一个数组，数组中的第一项是当前状态的值，第二项是一个函数，可以用来更新状态。
import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
在上面的示例中，我们使用 useState 创建了一个名为 count 的状态变量，初始值为 0。然后，在按钮的 onClick 事件中，调用 setCount 函数来更新状态。
useEffect
useEffect 用于执行副作用操作，例如获取数据、订阅事件等。它接收两个参数：一个函数和一个可选的依赖数组。当依赖数组中的任何一个值发生变化时，函数就会被调用。如果依赖数组为空，则函数只会在首次渲染时被调用。
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
在上面的示例中，我们使用 useEffect 来更新页面标题。我们将标题设置为一个字符串，包含当前的点击次数。由于我们传递了 count 作为依赖数组，因此每次点击按钮时，useEffect 都会被调用。
useContext
useContext 可以让你在函数组件中使用 context。它接收一个 context 对象，并返回当前上下文的值。当上下文的值发生变化时，组件将自动重新渲染。
import React, { useContext } from 'react'; const ExampleContext = React.createContext('default'); function ChildComponent() { const value = useContext(ExampleContext); return ( <div> {value} </div> ); } function Example() { return ( <ExampleContext.Provider value='Hello, world!'> <ChildComponent /> </ExampleContext.Provider> ); }
在上面的示例中，ChildComponent 组件使用了 useContext，以获取 ExampleContext 的值。在 Example 组件中，我们通过 <ExampleContext.Provider> 隐藏地传递了 "Hello, world!" 作为上下文的值。由于 ChildComponent 使用了 useContext，因此它将自动重新渲染。
