react实现页面局部刷新

使用 useState 和 useEffect 管理局部状态

在 React 中，可以通过 useState 定义需要刷新的局部状态，配合 useEffect 监听依赖项变化。当状态更新时，只有依赖该状态的组件会重新渲染。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetchData();
  }, []); // 空数组表示仅在组件挂载时执行

  const fetchData = async () => {
    const response = await fetch('api/data');
    const result = await response.json();
    setData(result); // 更新局部状态触发重新渲染
  };

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={fetchData}>刷新数据</button>
    </div>
  );
}

通过条件渲染控制显示区域

利用条件渲染（如 && 或三元表达式）可以精确控制需要刷新的部分。结合状态管理，仅重新渲染符合条件的组件片段。

function ConditionalRefresh() {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div>
      <button onClick={() => setShowDetails(!showDetails)}>
        {showDetails ? '隐藏详情' : '显示详情'}
      </button>
      {showDetails && <DetailComponent />}
    </div>
  );
}

使用 React.memo 优化性能

对于子组件，通过 React.memo 进行记忆化处理，避免父组件状态更新时不必要的重新渲染。只有当 props 变化时才会触发更新。

const MemoizedComponent = React.memo(function Child({ data }) {
  return <div>{data}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <MemoizedComponent data={text} /> {/* 仅当text变化时重新渲染 */}
    </div>
  );
}

结合 Context API 实现跨组件更新

通过 Context 提供局部状态共享，消费者组件（Consumer）在 Context 值变化时会自动更新，无需透传 props。

const RefreshContext = createContext();

function App() {
  const [value, setValue] = useState('初始值');

  return (
    <RefreshContext.Provider value={{ value, setValue }}>
      <ChildComponent />
    </RefreshContext.Provider>
  );
}

function ChildComponent() {
  const { value, setValue } = useContext(RefreshContext);

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => setValue('新值')}>更新</button>
    </div>
  );
}

使用 useReducer 处理复杂状态逻辑

对于多状态关联的场景，useReducer 可以集中管理状态变更逻辑，通过 dispatch 触发局部更新。

function reducer(state, action) {
  switch (action.type) {
    case 'update':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

function ReducerDemo() {
  const [state, dispatch] = useReducer(reducer, { data: null });

  const handleUpdate = () => {
    fetch('api/data').then(res => res.json())
      .then(data => dispatch({ type: 'update', payload: data }));
  };

  return (
    <div>
      <div>{state.data}</div>
      <button onClick={handleUpdate}>获取数据</button>
    </div>
  );
}

通过 key 属性强制重置组件

为组件设置唯一的 key 属性，当 key 值变化时 React 会销毁旧组件并重新挂载新实例，实现强制刷新效果。

function KeyRefresh() {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <div>
      <ExpensiveComponent key={refreshKey} />
      <button onClick={() => setRefreshKey(prev => prev + 1)}>
        强制刷新组件
      </button>
    </div>
  );
}