React Hooks 简介

React Hooks 是 React 16.8 版本引入的一个新特性，它使得在函数组件中管理状态和副作用变得更加简单。以下是一些关于 React Hooks 的基础教程。

React Hooks 是用于在函数组件中“钩子”状态的逻辑。它让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

常用 Hooks

useState

useState 钩子允许你在函数组件中添加 React 状态。这是最常用的 Hook。

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

useEffect 钩子用于在组件中执行副作用操作，比如数据获取、订阅或者手动更改 DOM。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 组件挂载后执行的副作用
    document.title = `You clicked ${count} times`;

    // 组件卸载前执行的副作用
    return () => {
      document.title = 'Hello';
    };
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

学习资源

想要了解更多关于 React Hooks 的知识，可以阅读我们的 React Hooks 教程。