React中点击按钮手动刷新重渲染组件以触发react-query的实现方法

算力阿峰

2026-9-27

React 组件局部重渲染 & react-query 手动触发请求方案

适配react-query场景的最优方案（优先推荐）

你需要的核心是触发react-query请求，不需要强行依赖组件重渲染实现，react-query的useQuery/useMutation本身已经内置了手动触发请求的refetch方法，不需要额外编写useEffect逻辑，性能更好、逻辑更简洁：

import { useQuery } from '@tanstack/react-query'

function YourComponent() {
  // 调用useQuery时解构出refetch方法
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['yourDataKey'], // 你的查询唯一标识
    queryFn: () => fetch('/your/api/path').then(res => res.json()) // 你的请求逻辑
  })

  return (
    <div>
      {/* 直接将refetch绑定到按钮点击事件即可 */}
      <button onClick={() => refetch()}>手动刷新数据</button>
      {/* 其余组件渲染逻辑 */}
    </div>
  )
}

通用React手动触发组件局部重渲染方案（仅当你确实需要刷新组件时使用）

如果你有其他场景必须仅刷新当前组件、不刷新整个窗口，可以通过以下两种方式实现：

函数组件方案：通过更新无意义的状态变量触发重渲染

import { useState } from 'react'

function YourComponent() {
  // 定义仅用于触发重渲染的状态变量
  const [, forceRender] = useState(0)

  return (
    <div>
      <button onClick={() => forceRender(prev => prev + 1)}>手动刷新组件</button>
      {/* 组件重渲染时会重新执行渲染逻辑、依赖变化的useEffect等 */}
    </div>
  )
}

类组件方案：直接调用React内置的forceUpdate方法

class YourComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.forceUpdate()}>手动刷新组件</button>
      </div>
    )
  }
}