为什么不需要这种useEffect依赖关系(正在使用的)?(埃斯林特日志)

Question

我正在开发这个使用 websockets 的 React 应用程序，首先，一些背景信息：

我得到了一个用户可以用钩子更改的fooArray，我得到了一个在挂载时更改的socket。现在，我得到了以下代码，// foo array change listener就是我正在谈论的代码。我包括了其他的以便于理解

// socket ref
const socket = useRef(null);
// foo array change listener
useEffect(() => {
// this === null is there to prevent emitting on something that's null,
// if another way is possible too, please let me know.
if (socket.current === null) return;
socket.current.emit('foos', JSON.stringify(fooArray));
}, [fooArray, socket.current]);
// socket connection on mount
useEffect(() => {
socket.current = ioClient(WS_URI);
}, []);

现在的问题是，如果我从fooArray change listener的依赖数组中删除socket.current，useEffect钩子将不会执行，并且在连接websocket时不会发生emit事件。

我将如何使用它使socket.current成为依赖数组的一部分，而不是未使用..？

Answer 1

useEffect钩子按照它们的编写顺序执行，前提是它们的依赖数组导致它们运行(ll useEffects 钩子在初始渲染时运行(

由于您已经初始化了 useEffect 中的套接字，该套接字是使用 socke 编写的，因此在初始渲染时，您将没有套接字实例。

更改使用顺序效果将为您工作

// socket ref
const socket = useRef(null);
// socket connection on mount
useEffect(() => {
socket.current = ioClient(WS_URI);
}, []);
// foo array change listener
useEffect(() => {
socket.current.emit('foos', JSON.stringify(fooArray));
}, [fooArray]);