当前位置：首页 > news >正文

React 18的新特新

news 来源：原创 2024/5/19 21:10:55

React 18 最新的特性
批处理文件
在同一个函数中, 调用多次 useState 也只是会更新一次

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // 不触发re-render
    setFlag(f => !f); // 不触发re-render
    // 在调用结束是只触发一次re-render（这就是batching）
  }
  
  return <button onClick={handleClick}>Next</button>;
}

但是在React 18以前，对于在异步回调中调用的updates，React Batching将无法生效：

function handleClick() {
  fetchSomething().then(() => {
  setCount(c => c + 1); // 触发re-render
  setFlag(f => !f); // 再次触发re-render
  });
}

这是因为在React 18之前，React只在事件处理程序期间批量更新。默认情况下，React不会对promise、setTimeout或任意event事件中的更新进行批处理。
在 React 18 版本的这个flushSync 就可以达到批量更新

import { flushSync } from 'react-dom';
flushSync(() => {
setCount(c => c + 1); 
setFlag(f => !f); 
});

批量更新但是render 值渲染一次, 节省了 dom的渲染性能
更新状态
2.1 紧急更新（Urgent updates）：反映直接的交互，如输入、点击、按键按下等等。
2.2 过渡更新（Transition updates）：将UI从一个视图过渡到另一个视图。
输入、点击、按键按下等需要立即响应以符合人类的物理认知，符合人的直觉。但是过渡更新却不同，用户不会期望看到中间的转换过程（只需要结果），因此可能不需要立即更新视图。
在React 18以前的版本所有的更新都会认为是紧急更新。而startTransition提供api给用户来手动将某些更新标记为非紧急更新，从而避免浪费时间去渲染不必要的内容。
如下面的例子：

// 在界面上显示用户输入
setInputValue(input);
// 在界面上呈现查询结果
setSearchQuery(input);
setInputValue会立即更新用户的输入到界面上，属于需要紧急更新的操作。setSearchQuery是根据用户输入，查询相应的内容，用户可以输入很多次，如果一直查询会可能会导致过多的js计算消耗在查询上面（甚至阻塞输入操作），而一般来说用户的期望值是「等待输入完成之后，查询并显示最终的结果」，因此这里的setSearchQuery可以看成是非紧急更新。
通过startTransition包裹setSearchQuery将其标记为非紧急更新：
setInputValue(input);
// 标记为非紧急更新
startTransition(() => {
React.setSearchQuery(input);
});
2.3 setTimeout的区别
就上面setSearchQuery的例子，使用setTimeout（或者debounce or throttle）也能达到相似的目的，那这个startTransition和setTimeout有啥区别？
一个重要区别是setTimeout是「延迟」执行，startTransition是立即执行的，传递给startTransition的函数是同步运行，但是其内部的所有更新都会标记为非紧急，React将在稍后处理更新时决定如何render这些updates，这意味着将会比setTimeout中的更新更早地被render。