React 内置 Hook 是一组允许你在函数组件中使用 state 和其他 React 特性的函数。它们极大地扩展了函数组件的功能，使得在无需编写 class 的情况下也能使用 React 的全部功能。以下是一些主要的 React 内置 Hook 的介绍：
1.useState
useState 是用于在函数组件中添加状态（state）的 Hook。它返回一个状态变量和一个更新该状态的函数。你可以使用它来管理组件的本地状态。
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>
);
}2.useEffect
useEffect 允许你在函数组件中执行副作用操作。这些副作用操作包括数据获取、订阅、手动修改 DOM 等。它类似于类组件中的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount），但更加统一和灵活。
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 的清理函数来做到这一点。
3.useContext
useContext 允许你订阅 React 的 Context。这使得组件能够访问到由父组件提供的值，而无需显式地通过 props 传递。
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={
{ color: theme.color }}>
I am styled by theme context!
</button>
);
}4.useRef
useRef 返回一个可变的 ref 对象&#