React的函数组件的hook

React 提供了一系列的 Hook，允许你在函数组件中使用状态和其他 React 特性，而无需编写类组件。以下是一些常用的 React Hook：

1. useState：用于在函数组件中添加状态。它让你能够拥有可变状态和副作用。

   const [state, setState] = useState(initialState);

2. useEffect：用于在函数组件中执行副作用操作。它可以模拟生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

   useEffect(() => {
     // 副作用逻辑
     return () => {
       // 可选的清理逻辑
     };
   }, dependencies); // 依赖数组

3. useContext：允许你订阅 context，这样在组件树渲染时，任何 context 的变化都可以被组件感知到。

   const contextValue = useContext(MyContext);

4. useReducer：当你需要更复杂的状态逻辑时，可以使用 useReducer 来代替 useState。它接收一个 reducer 函数和初始状态，并返回当前状态和一个 dispatch 函数。

   const [state, dispatch] = useReducer(reducer, initialState);

5. useMemo：用于执行记忆化的计算。只有当依赖项变化时，才会重新计算。

   const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]);

6. useCallback：返回一个 memoized 的回调函数，只有当依赖项变化时，回调函数才会更新。

   const memoizedCallback = useCallback(() => {
     // 回调逻辑
   }, [dependency1, dependency2]);

7. useRef：创建一个可变的 ref 对象，其 .current 属性被保留在组件的整个生命周期中。

   const refContainer = useRef(initialValue);

8. useImperativeHandle：当你使用 forwardRef 将 ref 传递到可转发的组件时，你可以使用 useImperativeHandle 来自定义暴露给父组件的 ref 对象。

   useImperativeHandle(ref, () => ({
     // 暴露给父组件的 API
   }));

9. useLayoutEffect：与 useEffect 类似，但它会在所有的 DOM 变更之后同步触发。这对于需要在浏览器绘制前执行的 DOM 读取操作是必要的。

   useLayoutEffect(() => {
     // 副作用逻辑
   }, dependencies);

10. useDebugValue：这个 Hook 可以在 React 开发者工具中显示标签，帮助你调试 Hook。

    useDebugValue(value);

11. useTransition：用于控制状态变化时的性能优化，它可以延迟状态更新引起的渲染。

    const [startTransition, isPending] = useTransition({
      timeoutMs: 3000,
    });

12. useDeferredValue：允许你在异步渲染期间使用之前渲染的值，而不是等待当前渲染的值。

    const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });

13. useId：创建一个唯一的 ID，可以用于 DOM 元素的属性。

    const id = useId();

14. useInsertionEffect：与 useEffect 类似，但它会在组件插入到 DOM 后触发，而不是在每次渲染后。

    useInsertionEffect(() => {
      // 副作用逻辑
    }, dependencies);

15. useAnimation：用于动画化值，它提供了一个声明式 API 来控制动画。

    const [animatedValue, setAnimatedValue] = useAnimation();

这些 Hook 使得函数组件可以处理原本需要类组件来实现的复杂交互和状态逻辑。通过组合使用这些 Hook，你可以构建功能丰富且高效的组件。