引擎盖下的 React hook 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. 渲染虚拟圆顶。
2. componentDidMount .
3. 向浏览器绘制。

功能组件

1. 渲染虚拟圆顶。
2. useLayoutEffect .
3. 向浏览器绘制。
4. useEffect .

---

如果您的副作用是异步的，则componentDidMount和useEffect之间没有区别。(几乎(
但如果它是同步的，componentDidMount和useLayoutEffect会导致视觉滞后。