react hook

React Hooks 是 React v16.8 中新增的一项功能，它能让函数组件拥有类组件中的一些特性，如状态和生命周期等。

以下是几个基本的 React Hooks：

useState

useState 是最基础的 Hook 之一，它可以让你在函数组件中保存和更新状态。useState 接收一个初始状态作为参数，并返回一个数组，数组中的第一项是当前状态的值，第二项是一个函数，可以用来更新状态。

import React, { useState } from 'react';

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

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

在上面的示例中，我们使用 useState 创建了一个名为 count 的状态变量，初始值为 0。然后，在按钮的 onClick 事件中，调用 setCount 函数来更新状态。

useEffect

useEffect 用于执行副作用操作，例如获取数据、订阅事件等。它接收两个参数：一个函数和一个可选的依赖数组。当依赖数组中的任何一个值发生变化时，函数就会被调用。如果依赖数组为空，则函数只会在首次渲染时被调用。

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

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

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

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

在上面的示例中，我们使用 useEffect 来更新页面标题。我们将标题设置为一个字符串，包含当前的点击次数。由于我们传递了 count 作为依赖数组，因此每次点击按钮时，useEffect 都会被调用。

useContext

useContext 可以让你在函数组件中使用 context。它接收一个 context 对象，并返回当前上下文的值。当上下文的值发生变化时，组件将自动重新渲染。

import React, { useContext } from 'react';

const ExampleContext = React.createContext('default');

function ChildComponent() {
  const value = useContext(ExampleContext);

  return (
    <div>
      {value}
    </div>
  );
}

function Example() {
  return (
    <ExampleContext.Provider value='Hello, world!'>
      <ChildComponent />
    </ExampleContext.Provider>
  );
}

在上面的示例中，ChildComponent 组件使用了 useContext，以获取 ExampleContext 的值。在 Example 组件中，我们通过 <ExampleContext.Provider> 隐藏地传递了 "Hello, world!" 作为上下文的值。由于 ChildComponent 使用了 useContext，因此它将自动重新渲染。