React+异步任务的疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1160 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景：Vue 用户，重学 React 中

先上代码

function App() {
  const afterRender = () => {
    console.log('after render')
   }

  // 1.  渲染后回调
  // useEffect(afterRender)
  // 2.  尝试用异步方式模拟渲染后的回调
  queueMicrotask(afterRender)
  // Promise.resolve().then(afterRender)
  // setTimeout(afterRender, 0)


  return (
    <div className="App">
     <div>something</div>
    </div>
  )
}

问题在于：

useEffect 表现正常（废话），

而 2 中的 3 种方法，通过异步方式实现渲染后执行，afterRender 会被调用两次，即控制台打印两次after render，

这到底是什么原因？

第 1 条附言 · 2021-10-21 14:27:21 +08:00

已解决，react 版本 17，关掉 Strict Mode 成功解决。谢谢各位！

div

异步

afterrender

React

5 条回复 • 2021-10-21 14:34:56 +08:00

mxT52CRuqR6o5

2021-10-21 11:49:03 +08:00

可能是和 fiber/concurrent mode 有关，文档中的意思也是说在最终 patch 之前可能会 render 多次

sweetcola

2021-10-21 11:52:04 +08:00

分析了一下，不太对劲，不应该输出两次。在 codesandbox 里调试一下，确实只输出了一次。你的 React 版本是 18 并且用上了 Strict Mode 吗（我也没用过，不太确定）？

Kasumi20

2021-10-21 11:56:27 +08:00

Strict Mode

Kasumi20

2021-10-21 11:57:34 +08:00

严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过故意重复调用以下函数来实现的该操作：

class 组件的 constructor，render 以及 shouldComponentUpdate 方法
class 组件的生命周期方法 getDerivedStateFromProps
函数组件体
状态更新函数 (即 setState 的第一个参数）
函数组件通过使用 useState，useMemo 或者 useReducer

Chingim

2021-10-21 14:34:56 +08:00

我用 react17/react18 都复现不了呢

React+异步任务 的疑问

React+异步任务的疑问