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

类组件

呈现虚拟dom。
componentDidMount。
绘画到浏览器。

功能组件

呈现虚拟dom。
useLayoutEffect。
绘画到浏览器。
useEffect。

如果副作用是异步的，则componentDidMount和useEffect之间没有区别。（差不多）
但是，如果它是同步的，则componentDidMount和useLayoutEffect会导致视觉上的滞后。

Answer 2

它不会阻止UI线程（实际上可能使用Web Worker）。

此外，对于昂贵的电话，请考虑使用：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily

在后台对钩子useEffect（）进行反应。用useEffect安排的效果是否会阻塞主线程？

2 个答案:

类组件

功能组件