React.js 中如何使用Hooks

在 React.js 中，Hooks 是一种特殊的函数，它允许你在不编写类组件的情况下使用 state 和其他 React 特性。Hooks 是在 React 16.8 版本中引入的。以下是一些常用的 Hooks 及其用法：

1. useState

useState 是一个让函数组件具有 state 的 Hook。它接受一个初始值作为参数，并返回一个包含两个元素的数组：当前状态和一个用于更新状态的函数。

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

useEffect 是一个让函数组件执行副作用操作的 Hook。它接受一个函数作为参数，这个函数会在组件挂载、更新和卸载时执行。

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

useContext 是一个让函数组件访问 React context 的 Hook。它接受一个 context 对象作为参数，并返回该 context 的当前值。

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

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

  return <button className={theme}>I am styled by theme context!</button>;
}

4. useReducer

useReducer 是一个让函数组件具有更复杂 state 逻辑的 Hook。它接受一个 reducer 函数和一个初始状态作为参数，并返回一个包含当前状态和一个 dispatch 函数的数组。

import React, { useReducer } from 'react';

function 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 (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

5. useCallback

useCallback 是一个让函数组件记忆回调函数的 Hook。它接受一个函数和一个依赖数组作为参数，并返回一个记忆后的回调函数。

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

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

  const increment = useCallback(() => {
    onIncrement(count);
  }, [count]);

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

6. useMemo

useMemo 是一个让函数组件记忆计算结果的 Hook。它接受一个计算函数和一个依赖数组作为参数，并返回一个记忆后的计算结果。

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

function Example({ list }) {
  const [filter, setFilter] = useState('');

  const filteredList = useMemo(() => {
    return list.filter((item) => item.includes(filter));
  }, [list, filter]);

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>
        {filteredList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

这些是 React 中最常用的 Hooks。当然，还有其他的 Hooks，如 useRef、useLayoutEffect 等。你可以根据项目需求选择合适的 Hooks。