当前位置：首页 > React

react函数组件如何更新

2026-03-11 10:59:54React

使用 State Hook 更新组件

React 函数组件通过 useState Hook 管理状态。调用状态更新函数会触发组件重新渲染。

import { useState } from 'react';

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

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

使用 Effect Hook 处理副作用

useEffect Hook 用于在组件渲染后执行副作用操作（如数据获取、订阅等）。依赖项数组控制副作用的触发时机。

import { 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));
  }, []); // 空数组表示仅在组件挂载时执行
}

使用 Context 跨组件更新

通过 useContext Hook 访问 Context 数据，Context 值变化会触发依赖该 Context 的组件更新。

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

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

使用 useReducer 管理复杂状态

useReducer 适用于状态逻辑较复杂的场景，通过 dispatch 动作更新状态。

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      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' })}>Increment</button>
    </div>
  );
}

使用 useCallback 和 useMemo 优化性能

useCallback 缓存回调函数，useMemo 缓存计算结果，避免不必要的重新渲染。

react函数组件如何更新

import { useCallback, useMemo } from 'react';

function OptimizedComponent({ items }) {
  const handleClick = useCallback(() => {
    console.log('Item clicked');
  }, []);

  const filteredItems = useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);

  return <List items={filteredItems} onClick={handleClick} />;
}