react hooks怎么使用

React Hooks 是 React 16.8 中新增的特性，它允许函数组件中使用 state 和其他 React 特性，从而使函数组件具有类组件的能力。

使用 React Hooks 需要先引入 React 的 useState、useEffect 等钩子函数，然后在函数组件中使用它们。

useState

useState 是最常用的 Hook 之一，它可以让我们在函数组件中使用 state。useState 接收一个初始值作为参数，并返回一个数组，数组的第一个元素是当前 state 的值，第二个元素是更新 state 的函数。

例如，下面的代码在函数组件中使用了 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

useEffect 是另外一个常用的 Hook，它可以在函数组件中使用副作用。副作用包括数据获取、订阅或手动修改 DOM 等操作。useEffect 接收一个函数作为参数，该函数会在组件渲染完成后执行。

例如，下面的代码使用 useEffect 来更新页面标题：

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

useContext

useContext 可以让我们在函数组件中使用 Context。Context 是一种在组件树中传递数据的方法，它可以避免通过 props 层层传递数据。

例如，下面的代码使用 useContext 来获取全局的主题：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

使用 useContext 前需要先创建一个 Context，可以使用 React.createContext 方法来创建。

除了上述三个 Hook，还有 useReducer、useCallback、useMemo、useRef 等 Hook 可以使用。使用这些 Hook 可以让函数组件更加强大和灵活。