Laravel Echo结合Pusher JS在React Native函数组件中状态更新引发多次重渲染的问题咨询

你已经搞定了Echo和Pusher的核心连接，卡在状态更新触发的重复渲染上是很常见的React状态管理细节问题，我来帮你梳理下可行的解决方案：

1. 把Echo频道订阅逻辑限制为仅执行一次 #

你当前的代码大概率每次组件渲染都会重新执行echo.join()，这会导致重复订阅目标频道，进而触发.here()回调多次调用，引发不必要的setUsers和组件重渲染。核心解决方法是把订阅逻辑放到带空依赖数组的useEffect中，确保仅在组件挂载时初始化一次：

import { useEffect, useState } from 'react';

function StreamingRoom({ streamID }) {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 初始化频道订阅
    const channel = echo.join(`streaming-channel-${streamID}`);

    channel
      .here((newUsers) => {
        // 仅当新用户列表和当前状态不一致时才更新，过滤重复推送
        if (JSON.stringify(newUsers) !== JSON.stringify(users)) {
          setUsers(newUsers);
        }
      })
      .joining((user) => {
        // 使用函数式更新获取最新状态，无需依赖useRef
        setUsers(prevUsers => {
          // 先判断用户是否已存在，避免重复添加
          const isUserPresent = prevUsers.some(u => u.id === user.id);
          return isUserPresent ? prevUsers : [...prevUsers, user];
        });
      })
      .leaving((user) => {
        setUsers(prevUsers => prevUsers.filter(u => u.id !== user.id));
      });

    // 组件卸载时清理订阅，避免内存泄漏
    return () => {
      channel.leave();
    };
  }, [streamID]); // 仅当streamID变化时重新订阅频道

  // 组件渲染内容...
}

2. 用函数式状态更新替代useRef #

你之前用useRef获取最新用户状态的方式，可以用React的函数式状态更新来替代，这种方式更贴合React的状态管理逻辑，能确保你拿到的是实时最新的状态值，还能避开闭包陷阱的问题。

3. 用React.memo减少无关触发的重渲染 #

如果你的组件会因为父组件传递的无关props变化而被动重渲染，可以用React.memo包裹组件，让它仅在props真正变化时才重新渲染：

import React from 'react';

const StreamingRoom = React.memo(({ streamID }) => {
  // 组件内部逻辑...
});

额外优化：过滤无意义的状态更新 #

在.here()的回调中添加数组对比逻辑，能过滤掉Echo可能重复推送的相同用户列表，进一步减少不必要的状态更新和重渲染次数。

最后要注意，组件卸载时一定要调用channel.leave()清理订阅，避免内存泄漏和后续不必要的回调触发。

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