当前位置：首页 > React

react钩子函数如何实现

2026-01-25 14:49:26React

React 钩子函数实现方法

React 钩子函数（Hooks）是 React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性。以下是常见的钩子函数及其实现方式。

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

useEffect 钩子

useEffect 用于处理副作用，如数据获取、订阅或手动修改 DOM。它接受一个函数和一个依赖数组。

react钩子函数如何实现

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

useContext 钩子

useContext 用于访问 React 的上下文（Context），避免多层传递 props。

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#eee' }}>Themed Button</button>;
}

useReducer 钩子

useReducer 是 useState 的替代方案，适用于复杂状态逻辑。它接受一个 reducer 函数和初始状态。

react钩子函数如何实现

import React, { useReducer } from 'react';

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, { count: 0 });

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

useCallback 和 useMemo 钩子

useCallback 和 useMemo 用于性能优化，避免不必要的重新计算或重新渲染。

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

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const increment = useCallback(() => setCount(count + 1), [count]);
  const computedValue = useMemo(() => count * 2, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Computed: {computedValue}</p>
      <button onClick={increment}>Increment</button>
      <input value={input} onChange={e => setInput(e.target.value)} />
    </div>
  );
}

自定义钩子

可以创建自定义钩子来复用逻辑。自定义钩子是一个函数，名称以 use 开头，可以调用其他钩子。

import { useState, useEffect } from 'react';

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

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

  return { data, loading };
}

function UserProfile({ userId }) {
  const { data, loading } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) return <div>Loading...</div>;
  return <div>{data.name}</div>;
}

通过以上方法，可以灵活使用 React 钩子函数来管理状态、处理副作用和优化性能。