在 useEffect 中使用 useState 值而不使状态更新 useEffect

Question

我正在开发一个基于对象键管理字符串数组的函数。假设它看起来像这样：

import React, { useState, useEffect } from "react";
import FieldContext from "../contexts/FieldContext";
import io from "socket.io-client";

const [socket, setSocket] = useState(null);
// the `data` array gets changed every second due to a WebSocket, in case that's important
const [data, setData] = useState({ foo: [], bar: [] });
const [connections, setConnections] = useState(["conn1", "conn2"]);

const { checkedFields } = useContext(FieldContext); // ["foo", "moo"];

useEffect(() => {
  setConnections(prevConnections => {
    // The code below does the following: 
    // Loop through the temporary connections (which is a copy of checkedFields)
    // A. if `tempConn` is a key in the `data` object, push the name with `update_` prefix to the `_conns` array
    // B. If not, just push it without a prefix to the `_conns` array
    // Since the `checkedFields` array is ["foo", "moo"], the first element will get the prefix,
    // the other won't and will just get pushed.
    let _tempConns = [...checkedFields];
    let _conns = [];
    _tempConns.forEach(tempConn => {
      if (data[tempConn] !== undefined) _conns.push(`update_${tempConn}`);
      else _conns.push(tempConn);
    });
    return _conns;
  });
}, [checkedFields]);

// the websocket hook
useEffect(() => {
  const _socket = io(WS_URI);
  _socket.on("info", data => {
    // some magic happens here to add to the `data` object which is not important for this question
  });
  setSocket(_socket);
}, [])

我在使用这个钩子时收到以下警告：React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array。我明白，但如果我在依赖数组中包含data，我会得到大量不必要的更新。我该如何防止这种情况发生？ （请不要使用// eslint-disable-next-line）

Answer 1

您不仅在 useEffect 钩子的依赖数组中丢失了 data，而且还从依赖数组中丢失了 setConnections() 函数。

您可以使用useReducer 挂钩将状态更新逻辑移出useEffect 挂钩。

const initialState = {
   data: { foo: [], bar: [] },
   connections: ["conn1", "conn2"]
} 

const reducerFunc = (state, action) => {
   switch(action.type) {
       case 'UPDATE_CONNECTIONS':
          let _tempConns = [...action.checkedFields];
          let _conns = [];
          _tempConns.forEach(tempConn => {
              if (state.data[tempConn] !== undefined) _conns.push(`update_${tempConn}`);
              else _conns.push(tempConn);
          });
          return { ...state, connections: _conns };
        default: 
          return state;
   }
};

const [myState, dispatch] = useReducer(reducerFunc, initialState);

const { checkedFields } = useContext(FieldContext); // ["foo", "moo"];

useEffect(() => {
    dispatch({ type: 'UPDATE_CONNECTIONS', payload: checkedFields });
}, [checkedFields]);

由于 React 确保 dispatch 函数不会改变，你可以从 useEffect 钩子的依赖数组中省略它。

useReducer钩子的具体使用方法见以下链接：

• useReducer Hook - React Hooks Cheatsheet
• useReducer Hook - React docs

Answer 2

如果您可以在 websocket 中使用以下内容并且没有其他 useEffects 依赖于 data 参考，则可以尝试使用 useRef

useRef 返回一个可变的 ref 对象，其 .current 属性初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。

// make `data` a ref object
// Pitfall: any changes to `data.current` will NOT be tracked 
const data = useRef({ foo: [], bar: [] })


// the websocket hook
useEffect(() => {
  ...
  _socket.on("info", data => {
    ...
    // update properties on `data.current`
    data.current.foo = 'some new value'
    data.current.bar = 'anoher new value;
  });
  
  ...
}, [])

useEffect(() => {
  setConnections(prevConnections => {
    ... 
    // reference data value from data.current
    const data = data.current

    ...
    return _conns;
  });
}, [checkedFields])

Answer 3

随着您的更新，您的套接字似乎永远不会关闭。 如果您的组件卸载/重新安装，则在后台添加一个新套接字。 然后在每次更新时，它都会触发所有以前的套接字。

你的套接字钩子应该返回一个关闭套接字函数。 （我猜，我从不直接使用socket）

  useEffect(() => {
  const _socket = io(WS_URI);
  _socket.on("info", data => {
    // some magic happens here to add to the `data` object which is not important for this question
  });
  setSocket(_socket);
  return () => {_socket.close();}
}, [])

（这不是您的回答，但它可以提供帮助:)）