React Hooks 入门指南

React Hooks 是 React 16.8 中引入的新特性，它让你不用编写 class 就能使用状态和其他 React 特性。本文将介绍最常用的几个 Hooks。

useState

useState 是最基本的 Hook，它让你在函数组件中添加状态。

复制
1import React, { useState } from 'react';
2
3function Example() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}

useEffect

useEffect 让你在函数组件中执行副作用操作。

复制
1import React, { useState, useEffect } from 'react';
2
3function Example() {
4  const [count, setCount] = useState(0);
5
6  useEffect(() => {
7    document.title = `You clicked ${count} times`;
8  });
9
10  return (
11    <div>
12      <p>You clicked {count} times</p>
13      <button onClick={() => setCount(count + 1)}>
14        Click me
15      </button>
16    </div>
17  );
18}

使用 Hooks 可以让你的代码更加简洁和易于理解。继续探索其他 Hooks，如 useContext、useReducer 等，以充分利用 React 的强大功能。