React useEffect 不会阻止重新渲染答案

【问题标题】：React useEffect doesn't block the re-renderReact useEffect 不会阻止重新渲染
【发布时间】：2020-07-06 06:17:43
【问题描述】：

我需要创建一个功能性的反应组件，每次发生特定事件时自动更新内部数据。

我编写了下面的代码，但是每次调用回调时都会重新渲染组件，并且变量myArray 设置为空数组，而不是填充回调中的所有内容。

我做错了什么？我应该使用什么方法？

// event emulation
function onEventEmulator(callback, interval = 1000) {
    setInterval(() => callback('content'), interval);
}

function PollingComponent(props) {
    const [myArray, setMyArray] = useState([]);
    useEffect(() => {
        onEventEmulator(content => {
            setMyArray([...myArray, content]);
        });
    }, []); // with or without passing the empty array as second param, result does not change.
    return <ul>
        <li>Callback</li>
        <li>{myArray.length}</li>
    </ul>;
}

【问题讨论】：

标签： javascript reactjs use-effect use-state

【解决方案1】：

让我们试试这个：

function onEventEmulator(callback, interval = 1000) {
  setInterval(() => callback("content"), interval);
}

然后：

function PollingComponent(props) {
  const [myArray, setMyArray] = useState([]);

  useEffect(() => {
    onEventEmulator(content => {
      setMyArray(arr => [...arr, ...content]);
    });
  }, []);

  return (
    <ul>
      <li>Callback</li>
      <li>{myArray.length}</li>
    </ul>
  );
}

这里缺少的一件事是清除setInterval 的方法，但我想这不是你关心的问题。

【讨论】：

我想念这必须在某个时间间隔内完成（不仅仅是一次），很快就会更新代码。
您是在寻找某种事件发射器方法还是只是从某个 api 进行轮询？如果您正在寻找事件发射器（这更有可能），那么创建使用全局事件发射器的自定义钩子可能是一种解决方案。另一方面，如果池是你想要的，有像这样的钩子github.com/vivek12345/react-polling-hook
首先感谢您的帮助，我正在尝试研究useEffect，并且从其文档中应该允许在不重新渲染组件的情况下更改状态，但在我的示例中它没有。我是否以错误的方式使用 useEffect？
@Raffaele 通过查看您的代码，我很难说您是否正确使用了useEffect。不确定“特定事件”是什么意思 - 是单击按钮还是其他事件（如订阅 websocket 订阅）？换句话说，onEventEmulator 应该如何触发？您能否在codesandbox.io 上创建一些示例，我会尽力查看并尽可能为您提供帮助。
嗨@Danko，如果我这样做了，看起来您添加的代码正在解决问题，它会给网站的其他用户造成混乱。在您更新主答案中的代码后，我会将其标记为有用并被接受。