React Hooks 简介

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

常用 Hooks

以下是 React 中一些常用的 Hooks：

• useState: 用于在函数组件中添加 state。
• useEffect: 用于在组件渲染后执行副作用操作，如数据获取、订阅或手动更改 DOM。
• useContext: 用于订阅 Context 对象，以便在组件树中传递数据。

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

更多关于 useState 的信息，请访问React 官方文档。

useEffect

useEffect 允许你在组件中执行副作用操作，如数据获取或订阅。

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

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

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

    // 组件卸载前执行
    return () => {
      document.title = 'Initial title';
    };
  });

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

更多关于 useEffect 的信息，请访问React 官方文档。

React Hooks