在引擎盖下反应钩子 useEffect() 。使用 useEffect 调度的效果是否会阻塞主线程？

Question

在 React DOC 中，关于useEffect()钩子，我们得到了：

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

提示

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的效果不会阻止浏览器更新屏幕。

这究竟是什么意思？

示例：想象一下，我有以下内容：

• 受控输入
• 第一次渲染之后的 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. useLayoutEffect。
3. 绘制到浏览器。
4. useEffect。

componentDidMount如果您的副作用是异步的，则和之间没有区别useEffect。（几乎）
但是如果是同步的，componentDidMount又会useLayoutEffect造成视觉滞后。