react_tutorial/hooks

React Tutorial: Hooks 简介

Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些常用的 Hooks：

useState：用于在函数组件中添加 state。
useEffect：用于在组件渲染后执行副作用操作。
useContext：用于访问 context 值。
useReducer：类似于 useState，但更适合管理复杂 state。

useState

useState 是最常用的 Hook，它允许你在函数组件中添加 state。

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

更多关于 Hooks 的内容，请访问我们的 React Hooks 教程。