如何有意减慢 React 状态更新 - 批量更新

Question

有时我可能想卸载并重新安装其中包含新数据的组件。这可能看起来像：

setAllPosts(undefined);
setAllPosts(newArrayOfPosts);

因为 React 会批量更改状态，所以状态不会更改，具体取决于 newArrayOfPosts 的来源。我已经能够用 1 秒的 setTimeout() 破解解决方案，然后填写 setAllPosts()，但这感觉很错误。

有没有最佳实践方法来告诉 React 放慢速度一会儿？或者也许不批量更新这个特定的状态更改？

PS 我知道有更好的方法可以做到这一点，但我在第三方环境中工作，并且我所能访问的内容非常有限。

Answer 1

这就是你可以做到的 -

import { flushSync } from 'react-dom';

const handleClick = () => {
  flushSync(() => {
    setAllPosts(undefined);
  // react will create a re-render here
  });
  
  flushSync(() => {
    setAllPosts(newArrayOfPosts);
  // react will create a re-render here
  });
};

这用于取消批处理反应状态。这只是一种单一的方法。另一种方法是使用 setTimeout。请注意，在 React 18 版本中，setTimeouts 内的状态更新也会进行批处理 - 这称为自动批处理，但我们仍然可以通过使用不同的 setTimeouts 来实现这一点 -

const handleClick = () => {
  setTimeout(() => {
    setAllPosts(undefined);
  // react will create a re-render here
  }, 10);
  
  setTimeout(() => {
    setAllPosts(newArrayOfPosts);
  // react will create a re-render here
  },20);
};

只要确保保持时间差以排除批处理完成即可通过反应。

Answer 2

一旦 React 18 可用（目前是候选版本），将会有一个函数可以强制更新不进行批处理： flushSync

import { flushSync } from 'react-dom';

flushSync(() => {
  setAllPosts(undefined);
});
flushSync(() => {
  setAllPosts(newArrayOfPosts);
});

在那之前，您可能需要执行 setTimeout 方法（尽管它不会不需要是一整秒）。

PS 我知道有更好的方法可以做到这一点，但我在第三方环境中工作，并且我可以访问的内容非常有限。

是的，如果你能做点别的事情可能会更好。大多数时候，如果您想故意卸载/重新安装组件，最好通过使用key来实现，您可以在希望重新安装时更改该键。

const [key, setKey] = useState(0);
const [allPosts, setAllPosts] = useState([]);

// ...
setKey(prev => prev + 1);
setAllPosts(newArrayOfPosts);

// ...
return (
   <SomeComponent key={key} posts={allPosts} />
)

Answer 3

有时我可能想卸载并重新安装其中包含新数据的组件。

听起来这个用例需要一个 useEffect() ，它具有基于您关心的事物的依赖关系，例如提供给该组件的另一条状态或道具。

useEffect(() => {
   setAllPosts(newArrayOfPosts);
}, [shouldUpdate]);

我什至看到过人们通过名为 count 或 renderCount 的状态依赖项来触发 useEffect() 的示例。不确定这是否一定是最佳实践，但这是解决问题的一种方法。

const [count, setCount] = useState(0);
const [allPosts, setAllPosts] = useState([]);

useEffect(() => {
   setAllPosts(props.values);
}, [count]);

const handleChange = () => {
   setCount(prevCount => prevCount + 1); // This will trigger your useEffect when handleChange() in invoked
}