时间戳

首页 > 解决方案 > React 组件在重新渲染时创建一个新的状态实例，即使状态没有改变

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

问题描述

我正在使用Socket.IOwithReact.js并且我希望 websocket 仅在呈现特定组件时启动，所以我使用 websocket 作为该组件的状态，如下所示：

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

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

标签： javascriptreactjswebsocketsocket.io

解决方案

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

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文档中提到了这种用法：

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

这是一个带有替代的示例 for 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是为了性能优化，而不是语义。从文档：

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

（他们的重点）

推荐阅读