19、React并发渲染：撕裂问题与解决方案

React并发渲染：撕裂问题与解决方案

1. 撕裂问题概述

在React应用中，撕裂（Tearing）是一种常见的问题，它通常发生在组件依赖的某些状态在应用渲染过程中被更新时。为了更好地理解撕裂问题，我们需要对比同步渲染和并发渲染。

在同步渲染模式下，React会从上到下逐个渲染组件树中的组件，这确保了在整个渲染过程中应用状态的一致性，因为每个组件都是使用最新状态进行渲染的。

而在并发渲染模式下，渲染过程是可中断的。例如下面的代码示例：

import { useState, useSyncExternalStore, useTransition } from "react";
// 外部状态
let count = 0;
setInterval(() => count++, 1);

export default function App() {
  const [name, setName] = useState("");
  const [isPending, startTransition] = useTransition();
  const updateName = (newVal) => {
    startTransition(() => {
      setName(newVal);
    });
  };
  return (
    <div>
      <input value={name} onChange={(e) => updateName(e.target.value)} />
      {isPending &