炼化react18新特性第一集startTransition 紧急更新：如：打字，拖拽，点击等需要立即响应的行为过渡更

startTransition

紧急更新：如：打字，拖拽，点击等需要立即响应的行为
过渡更新：如从一个视图到另一个视图的过渡，不需要立即响应，延迟响应可以接受。

const [inputValue, setInputValue] = React.useState("");
const onChange = (e) => {
  setInputValue(e.target.value);//紧急
  setSearchValue(e.target.value);//非紧急
}
return (
  <div className="search-box">
    <input type="text" value={inputValue} onChange={onChange} />
  </div>
);

例如在一个组件中有如上代码。当用户在input表单中输入后，setInputvalue需要立即响应，立马改变表单中输入框的value值，但是搜索框中可以缓一缓。所以就需要用startransistion包裹非聚集的部分，标记它是过渡更新的范畴。

自动批处理

react18之前

只会在事件回调中使用自动批处理，Promise，setTimeout原生事件等场景不会使用。

setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 10000);

上例中会re-render两次，每次state更新都会变化一次。

react18之后

只会触发一次，不关心场景。

不想使用自动批处理——flushSync

强制同步执行。

function handledClick(){
  fulshSync(()=>{
  setCount((c)=>c+1)
  })
    fulshSync(()=>{
  setFlag(f)
  })}

上面两次状态改变都会触发react更新dom所以执行下来更新了两次。