这是 React 中的有效语法吗？答案

【问题标题】：Is this valid syntax in React?这是 React 中的有效语法吗？
【发布时间】：2022-02-17 17:12:10
【问题描述】：

我正在处理一个 React 项目，并且在安装组件后我必须在其中初始化一个套接字。为此，我正在使用这种语法，我想知道它是否有效。

function Component() {
    const socket = useMemo(() => {
        return io('http://localhost:3001')
    },[socket]);

    return (
        <h1>Component</h1>
    )
}

这样，我的项目和套接字工作得很好，但我想知道实现相同效果的常规方法。我在另一个 React 项目中使用了相同的语法，它给了我 socket 变量的“引用错误”。

【问题讨论】：

标签： reactjs react-hooks react-usememo

【解决方案1】：

您需要在useMemo 中添加一个依赖数组，否则它会在每次渲染时触发。在那之后，是的，这是一个有效的语法:)

const socket = useMemo(() => {
    return io('http://localhost:3001')
}, [])

【讨论】：

感谢您的回复，但我输入了错误的代码！我已经更新了你现在可以看看的问题。再次为这种愚蠢的错误感到抱歉。我担心将相同的变量作为依赖项放在 useMemo() 钩子中。
好吧，那你为什么要这么做？您对此有具体案例吗？ ;) 依赖数组应该只计算在改变时需要重新触发 useEffect 的变量。所以我不明白你为什么会说“我正在设置一个变量，当它自己改变时应该重新计算”:)
哦！好的！实际上，我确实知道依赖项的含义以及将相同变量作为依赖项传递的含义，但是您的最后引用改变了一切。这是一个很好的解释。非常感谢。