React18新增特性介绍

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的渲染性能

更新状态：

紧急更新（Urgent updates）：反映直接的交互，如输入、点击、按键按下等等。

过渡更新（Transition updates）：将UI从一个视图过渡到另一个视图。

输入、点击、按键按下等需要立即响应以符合人类的物理认知，符合人的直觉。但是过渡更新却不同，用户不会期望看到中间的转换过程（只需要结果），因此可能不需要立即更新视图。
在React 18以前的版本所有的更新都会认为是紧急更新。而startTransition提供api给用户来手动将某些更新标记为非紧急更新，从而避免浪费时间去渲染不必要的内容。

如下面的例子：

// 在界面上显示用户输入

setInputValue(input);

// 在界面上呈现查询结果

setSearchQuery(input);

setInputValue会立即更新用户的输入到界面上，属于需要紧急更新的操作。setSearchQuery是根据用户输入，查询相应的内容，用户可以输入很多次，如果一直查询会可能会导致过多的js计算消耗在查询上面（甚至阻塞输入操作），而一般来说用户的期望值是「等待输入完成之后，查询并显示最终的结果」，因此这里的setSearchQuery可以看成是非紧急更新。
通过startTransition包裹setSearchQuery将其标记为非紧急更新：

setInputValue(input);
// 标记为非紧急更新
startTransition(() => {
React.setSearchQuery(input);
});

setTimeout的区别

就上面setSearchQuery的例子，使用setTimeout（或者debounce or throttle）也能达到相似的目的，那这个startTransition和setTimeout有啥区别？
一个重要区别是setTimeout是「延迟」执行，startTransition是立即执行的，传递给startTransition的函数是同步运行，但是其内部的所有更新都会标记为非紧急，React将在稍后处理更新时决定如何render这些updates，这意味着将会比setTimeout中的更新更早地被render。

到此这篇关于React18新增特性介绍的文章就介绍到这了,更多相关React新特性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论