Hook简介_React.JS基础教程

React的Hook是React 16.8版本引入的新特性，它可以让你在不编写class的情况下使用state和其他React特性。使用Hook，你可以在函数组件中使用React的状态、生命周期和其他特性。

Hook使得在函数组件中使用React变得更加方便和简单。不再需要使用class组件来使用状态，而是可以直接在函数组件中使用useState、useEffect等Hook函数。

下面是一些常用的React 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>
  );
}

useEffect：用于在函数组件中执行副作用操作，比如数据获取、订阅、DOM操作等。它接收一个回调函数和一个依赖数组。

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

useContext：用于在函数组件中访问React的上下文。它接收一个上下文对象（通过React.createContext创建），并返回当前上下文的值。

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeTogglerButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

这些是React中一些常用的Hook函数，它们可以帮助你在函数组件中实现状态管理、副作用操作和上下文访问等功能。使用Hook可以让你的代码更加简洁和易于维护，建议尽量使用Hook来开发React应用。