Question

为什么在React中的useEffect里写了while循环会导致下次渲染变慢呢？

绝大多数文档都在写useEffect在浏览器渲染之后执行，但下面的例子为什么点击了按钮之后，2秒才改变DOM呢？

export default function App() {
  const [text, setText] = useState(0)
  const ref= useRef(null)
  console.log('app render', text);
  useEffect(() => {
    console.log(text,'text');
    let i = 0;
    while(i < 1000000000){
  }, [text])
  return (
    <span ref={ref} >{text}</span>
    <button onClick={()=>setText(Date.now())} >button</button>
}

5 个回答

NoBugs 一个人 · Accepted Answer

果然如 @BenLau 所说，这是React18新引入的feature，其实把代码稍微改下，就可以在调用堆栈中比较清晰的看到耗时的函数在哪里了，见下图：

  useEffect(() => {
    const testLoop = () => {
      console.log(text,'text');
      let i = 0;
      while(i < 1000000000){
    testLoop();
  }, [text])

这个新功能总结起来就是如果是 discrete input（如click） 的话，useEffect会同步执行，而不是等到UI渲染完成之后再执行。这个功能的使用场景我暂时还没有遇到，我很听话的听从了React的建议，不到万不得已不使用useEffect。原由是React新版文档里已经明确告诉开发者useEffect最好就不用使用了，所有场景都可以用其他方式解决，而且还贴心的给了好多事例代码。所以在我看来，下面这个方案中提供的案例代码，完全不符合React推荐写法，不敢相信这个是React团队人员写的代码，建议他/她还是看下React新版文档，优化下代码，这个案例就不会有问题了，哈哈哈。

useEffect(() => {
  if (!disableSubmit) {
    const form = formRef.current;