React如何仅在接口返回数据变化时触发组件重渲染

你遇到无限渲染、无意义重渲染的本质是三个问题：

• 每次fetch返回的res.json()会生成全新引用的对象/数组，哪怕内容和本地已有数据完全一致，直接调用状态更新方法的话，React会判定状态变化触发重渲染
• 把userlist放进useEffect依赖数组后，流程会变成「执行effect拉数据→更新state触发重渲染→依赖项变化再次执行effect」，直接进入无限循环
• 空依赖数组的写法只会在组件首次挂载时拉取一次数据，后续不会自动同步更新，达不到实时同步的效果

方案1：轮询+深比较差量更新（无需改后端，成本最低） #

核心逻辑是按合理间隔轮询接口，拿到返回结果后先做深度内容对比，只有数据真的发生变化时才更新状态触发重渲染，既不会出现无限循环，也不会做无意义的重渲染。

1. 先写一个适配普通JSON结构的深比较方法，不需要引入第三方依赖：

// 对比普通JSON对象/数组的内容是否完全一致
function isDeepEqual(a, b) {
  if (a === b) return true
  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false
  const keysA = Object.keys(a)
  const keysB = Object.keys(b)
  if (keysA.length !== keysB.length) return false
  for (const key of keysA) {
    if (!keysB.includes(key) || !isDeepEqual(a[key], b[key])) return false
  }
  return true
}

注意：不要用JSON.stringify(a) === JSON.stringify(b)做对比，如果对象键的顺序不一致，哪怕内容完全一样也会判定为不等，容易出bug。

2. 改造组件逻辑，用useRef存最新的列表值避免闭包陷阱，不要把列表state放进effect依赖：

import { useState, useEffect, useRef } from 'react'

function App() {
  const [userlist, setUserlist] = useState([])
  // 用ref同步最新的userlist值，避免effect产生闭包拿到旧值
  const latestUserlist = useRef(userlist)
  latestUserlist.current = userlist

  useEffect(() => {
    // 轮询间隔设2-3秒即可，不需要毫秒级轮询，避免给后端造成不必要压力
    const timer = setInterval(async () => {
      const res = await getAllUsers()
      // 请求失败直接跳过，不更新状态
      if (res instanceof Error) return
      // 仅当内容存在差异时才更新state，触发重渲染
      if (!isDeepEqual(res, latestUserlist.current)) {
        setUserlist(res)
      }
    }, 3000)

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer)
  }, [])

  // 其余页面渲染逻辑
  return <></>
}

这个方案可以直接复用到房间列表、播放列表等其他需要同步的模块，只需要替换对应的接口请求和state变量即可。

方案2：WebSocket主动推送（体验最优，无轮询开销） #

如果需要更低的同步延迟（比如播放进度同步、用户进出房间即时提醒），可以让后端新增WebSocket接口：后端只在对应数据真的发生变更时，主动向已连接的客户端推送最新数据，前端收到推送后再做对比更新，完全不需要定时发请求，性能和实时性最好。
基础实现示例：

useEffect(() => {
  // 替换为你自己的后端WebSocket地址
  const ws = new WebSocket('ws://你的服务地址/sync')
  ws.onmessage = (event) => {
    const { type, data } = JSON.parse(event.data)
    switch(type) {
      case 'userlist_update':
        if (!isDeepEqual(data, latestUserlist.current)) setUserlist(data)
        break
      // 房间列表、播放列表的更新逻辑和上面一致
      // case 'roomlist_update': ...
    }
  }
  // 组件卸载时关闭ws连接
  return () => ws.close()
}, [])

• 依赖数组传空数组[]：effect只会在组件首次挂载时执行一次，后续不会再拉取最新数据，无法同步其他用户的变更
• 依赖数组传[userlist]：每次更新state触发重渲染后，都会因为依赖项变化重新执行effect拉数据，直接触发无限循环
• 做浅比较判断是否更新：if (newData !== userlist) setUserlist(newData)永远成立，因为每次接口返回的都是全新引用的对象，哪怕内容完全一致也会判定为不等，还是会触发无意义重渲染

内容的提问来源于stack exchange，提问作者Chester D