React Hooks 简介

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。Hooks 让你在组件中复用状态逻辑，让组件更小、更易于维护。

为什么要使用 Hooks？

在 React 之前，组件通常通过类来实现，而类组件存在以下问题：

代码重复：如果多个组件需要相同的逻辑，你需要复制粘贴相同的代码。
难以维护：随着组件的复杂度增加，类组件的代码会变得难以维护。
学习成本：对于初学者来说，理解类组件的生命周期可能会比较困难。

Hooks 解决了这些问题，它允许你将状态逻辑提取到组件之外，从而使得组件更加简洁和易于维护。

常用 Hooks

以下是一些常用的 React Hooks：

useState：用于在函数组件中添加 state。
useEffect：用于在组件中执行副作用操作，如数据获取、订阅或手动更改 DOM。
useContext：用于在组件树中跨组件传递 context。
useReducer：用于替代 useState，当你的 state 逻辑较为复杂时。
useCallback：用于缓存回调函数，避免不必要的渲染。
useMemo：用于缓存计算结果，避免不必要的计算。

useState 示例

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>
  );
}

useEffect 示例

import React, { useEffect, useState } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

更多资源

想要了解更多关于 React Hooks 的信息，可以访问以下链接：

希望这些信息能帮助你更好地理解 React Hooks！👍