WebSocket接收服务端新数据后触发React组件重渲染的实现咨询

下面提供两种不同复杂度的实现路径，你可以根据项目规模选择。

方案1：Redux Toolkit 实现（新手友好，生态成熟） #

这是最不容易踩坑的方案，不用自己手写订阅逻辑，官方能力直接覆盖需求。

• 安装依赖：npm install @reduxjs/toolkit react-redux
• 第一步：创建全局状态存储

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit'

const serverDataSlice = createSlice({
  name: 'serverData',
  initialState: {},
  reducers: {
    updateByKey: (state, action) => {
      const { key, value } = action.payload
      state[key] = value
    }
  }
})

export const { updateByKey } = serverDataSlice.actions
export const store = configureStore({
  reducer: {
    serverData: serverDataSlice.reducer
  }
})

• 第二步：全局封装 WebSocket，接收数据后更新存储

// socket.js
import { store, updateByKey } from './store'

const socket = new WebSocket('替换为你的后端WebSocket地址')
socket.onmessage = (event) => {
  // 约定后端返回格式为 { key: 要更新的字段名, value: 新值 }
  const res = JSON.parse(event.data)
  store.dispatch(updateByKey(res))
}

• 第三步：组件内按需订阅指定键
  只有你订阅的键值发生变化时，组件才会触发重渲染，其他字段更新完全不受影响

// 任意业务组件
import { useSelector } from 'react-redux'

function UserCard() {
  // 只订阅 serverData 下的 userInfo 字段
  const userInfo = useSelector(state => state.serverData.userInfo)
  return <div>用户名：{userInfo?.name}</div>
}

方案2：自定义轻量订阅存储（无第三方依赖） #

如果项目规模很小不想引入状态管理库，可以自己实现极简的订阅能力，逻辑非常好懂。

• 第一步：实现带订阅能力的存储类

// customStore.js
class ReactiveStore {
  constructor(initialState = {}) {
    this.state = initialState
    // 存储每个key对应的订阅回调列表
    this.subscribeMap = {}
  }

  // 订阅指定key的变化
  subscribe(key, callback) {
    if (!this.subscribeMap[key]) this.subscribeMap[key] = []
    this.subscribeMap[key].push(callback)
    // 返回取消订阅方法，组件卸载时调用避免内存泄漏
    return () => {
      this.subscribeMap[key] = this.subscribeMap[key].filter(cb => cb !== callback)
    }
  }

  // 更新指定key的值
  set(key, value) {
    // 值没有变化就不触发更新，减少无效渲染
    if (this.state[key] === value) return
    this.state[key] = value
    // 触发该key所有订阅的回调
    this.subscribeMap[key]?.forEach(cb => cb(value))
  }

  get(key) {
    return this.state[key]
  }
}

export const store = new ReactiveStore()

• 第二步：封装自定义Hook，方便组件调用

// useSubscribeKey.js
import { useEffect, useState } from 'react'
import { store } from './customStore'

export function useSubscribeKey(key) {
  const [value, setValue] = useState(store.get(key))
  useEffect(() => {
    const unsubscribe = store.subscribe(key, (newVal) => setValue(newVal))
    return unsubscribe
  }, [key])
  return value
}

• 第三步：WebSocket 接收数据后更新存储

const socket = new WebSocket('替换为你的后端WebSocket地址')
socket.onmessage = (event) => {
  const { key, value } = JSON.parse(event.data)
  store.set(key, value)
}

• 第四步：组件内订阅指定键

function NoticeBar() {
  // 只订阅 notice 字段，只有该字段更新时组件才会重渲染
  const notice = useSubscribeKey('notice')
  return <div>最新通知：{notice}</div>
}

注意事项 #

• WebSocket 实例全局唯一即可，不要在每个组件内重复创建连接
• 自定义方案一定要在组件卸载时执行取消订阅逻辑，避免内存泄漏
• 如果更新的值是对象、数组这类引用类型，修改时要返回新的引用，否则浅比较会判定值未变化，不会触发重渲染

内容的提问来源于stack exchange，提问作者Christian Bernstein