javascript - React hook useEffect() 底层。使用 useEffect 安排的效果是否会阻塞主线程？

Question

在 React DOCs 中，关于 useEffect() 钩子(Hook)，我们得到:

“使用 useEffect 安排的效果不会阻止浏览器更新屏幕。”

Tip

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen.

这到底是什么意思？

示例:假设我有以下内容:

• 受控输入
• 并在第一次渲染后执行一些昂贵的同步计算的 useEffect。

function App() {
  const [inputValue,setInputValue] = React.useState('');

  useEffect(()=>{
    // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
  },[]);

  return (
    <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
  );

}

这是否意味着即使在运行繁重的同步计算时，我也可以完全使用我的input(由 React 使用 JS 控制，它是单线程的)？如果是这样，这怎么可能？

Answer 1

类组件

1. 渲染虚拟 dom。
2. componentDidMount。
3. 在浏览器上绘画。

功能组件

1. 渲染虚拟 dom。
2. 使用LayoutEffect。
3. 在浏览器上绘画。
4. useEffect。

---

如果您的副作用是异步的，则 componentDidMount 和 useEffect 之间没有区别。 (差不多)
但如果是同步的，componentDidMount 和 useLayoutEffect 会造成视觉滞后。