字数

585 字

阅读时间

3 分钟

异步操作

1. setState 的异步调用（在 React 18 或批处理的情况下）：

   • 在 React 18 中，setState 调用可能会被批处理和延迟，尤其是在合成事件处理程序和生命周期方法中。即使在 React 18 之前，当 setState 调用是在合成事件处理程序或生命周期方法中时，它们通常也会被批处理。
   • 在 React 18 及其后的版本中，setState 默认是异步的。即使在同一个事件处理程序中多次调用 setState，它们也可能会被批处理，以减少重新渲染次数。

2. useEffect 和 useLayoutEffect：

   • useEffect 中定义的副作用函数是在 DOM 更新后异步执行的。与之不同的是，useLayoutEffect 中定义的副作用函数是在 DOM 更新后同步执行的。

3. React.lazy 和 Suspense：

   • 使用 React.lazy 和 Suspense 进行代码分割时，组件的加载是异步的。

4. 异步数据请求：

   • 通过 fetch、axios 或其他手段发起的网络请求都是异步操作，通常在 useEffect 中处理这些异步请求。

• useState 和 useReducer 更新状态时，状态更新是异步的。
• useEffect 和 useLayoutEffect 本身是同步调用的，但它们内部可以执行异步操作。
• useCallback 和 useMemo 是同步调用的，用于优化性能。
• useRef 是同步调用的，用于引用 DOM 元素或保存可变值。

同步操作

1. 初始渲染：

   • 初始渲染阶段通常是同步的。React 会构建初始的虚拟 DOM 树，并将其挂载到实际的 DOM 中。

2. setState 的同步调用（在 React 18 之前或非批处理的情况下）：

   • 在事件处理程序和生命周期方法（例如 componentDidMount 和 componentDidUpdate）中调用 setState，可能会立即更新组件的状态并触发重新渲染。

3. 生命周期方法：

   • React 的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）都是同步调用的。

4. 事件处理程序：

   • 由用户交互触发的事件处理程序是同步调用的。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名