React 组件在重新渲染时创建一个新的状态实例，即使状态没有改变

Question

我将Socket.IO 与React.js 一起使用，并且我希望websocket 仅在呈现特定组件时启动，因此我使用websocket 作为该组件的状态，如下所示：

const Comp = () => {
  const [ws] = useState(socketIO());
  // ... the rest of the component ...
};

但是当Comp 重新渲染时，它会创建新的 websocket 连接，即使我没有对连接进行任何更改。过了一会儿，我最终得到了 10 多个 websocket 连接。如何使组件仅保持 1 个连接？我不希望 websocket 连接成为全球性的。

Answer 1

请记住，函数式组件只是函数，所有关于函数的常见知识都适用。尽管钩子在幕后做了一些表面上的魔术（这并不是真正的魔术，只是它们具有我们看不到的上下文信息），但组件函数中的代码按照通常的规则运行。这意味着这段代码

const Comp = () => {
  const [ws] = useState(socketIO());
  // ... the rest of the component ...
};

将总是调用socketIO，以便将其返回值传递给useState。

要计算一个值一次，当组件第一次创建时，使用 ref (useRef) 来表示非状态实例信息（你可以直接存储在一个类组件实例），像这样：

const Comp = () => {
  const {current: instance} = useRef({});
  const ws = instance.ws = instance.ws || socketIO();
  // ... the rest of the component ...
};

{} 仍会在每次调用 Comp 时进行评估，但这种开销是微不足道的。你从useRef 得到的是一个具有current 属性的对象，该属性指的是一个可变对象——在组件的整个生命周期中始终保持不变。第二行使用该对象的ws 属性，如果它是虚假的，则第一次初始化它。

useRef docs 中提到了这种用法：

不过，useRef() 的用处不止是 ref 属性。它可以方便地保留任何可变值，类似于在类中使用实例字段的方式。

下面是socketIO 的替代示例：

const { useRef, useState } = React;

function socketIO() {
  console.log("socketIO called");
  return {};
}

const Comp = () => {
  console.log("Comp called");
  const {current: instance} = useRef({});
  const ws = instance.ws = instance.ws || socketIO();
  const [counter, setCounter] = useState(0);
  
  return (
    <div>
      {counter} <input type="button" value="+" onClick={() => setCounter(c => c + 1)} />
    </div>
  );
};

ReactDOM.render(<Comp/>, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

---

我应该注意到，在这里使用useMemo 很诱人，但是useMemo 并不能保证您构建记忆结果的函数不会被第二次调用。 useMemo 用于性能优化，而不是语义。来自the docs：

你可以依赖 useMemo 作为性能优化，而不是语义保证。 未来，React 可能会选择“忘记”一些以前记忆的值并在下次渲染时重新计算它们，例如为屏幕外组件释放内存。编写您的代码，使其在没有 useMemo 的情况下仍然可以工作 - 然后添加它以优化性能。

（他们的重点）