javascript - 引擎盖下的 React 钩子 useEffect()。使用 useEffect 调度的效果会阻塞主线程吗？

Question

在 React 文档中，关于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造成视觉滞后。