当前位置：首页 > React

react-hooks如何使用

2026-01-24 14:50:28React

使用 React Hooks 的基本方法

React Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性。以下是几种常见 Hooks 的使用方式。

useState

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

count 是状态变量，初始值为 0。
setCount 是更新状态的函数。

useEffect

useEffect 用于处理副作用，如数据获取、订阅或手动 DOM 操作。

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示仅在组件挂载时运行

  return <div>{data ? data.message : 'Loading...'}</div>;
}

第二个参数是依赖数组，控制 useEffect 的执行时机。

useContext

useContext 用于在组件中访问 React 的 Context。

import React, { useContext } from 'react';

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

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

  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Click</button>;
}

ThemeContext 是一个 Context 对象。
useContext 直接获取当前 Context 的值。

useReducer

useReducer 是 useState 的替代方案，适用于复杂状态逻辑。

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

reducer 是一个纯函数，接收当前状态和动作，返回新状态。
dispatch 用于触发状态更新。

useRef

useRef 用于获取 DOM 引用或保存可变值。

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

inputRef 是一个可变的 ref 对象，其 current 属性指向 DOM 节点。

自定义 Hooks

自定义 Hooks 允许将组件逻辑提取到可重用的函数中。

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

function DataDisplay() {
  const data = useFetch('https://api.example.com/data');

  return <div>{data ? data.message : 'Loading...'}</div>;
}