React.js如何使用Hooks

React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在不编写类（class）的情况下使用 state 和其他 React 特性。Hooks 主要有以下几种：

1. useState：用于在函数组件中添加 state。
2. useEffect：用于在函数组件中执行副作用操作，如数据获取、订阅或手动更改 DOM。
3. useContext：用于在函数组件中访问 React context。
4. useReducer：用于在函数组件中管理复杂的状态逻辑。
5. useCallback：用于在函数组件中缓存回调函数。
6. useMemo：用于在函数组件中缓存计算结果。
7. useRef：用于在函数组件中访问和修改 DOM 元素。
8. customHooks：用于创建自定义 Hooks。

下面是一些使用 Hooks 的示例：

1. useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. useEffect

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. useContext

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

4. useReducer

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

这些示例展示了如何在函数组件中使用 Hooks。你可以根据需要选择合适的 Hook，并在项目中使用它们。