亲宝软件园·资讯

展开

React新特性

快乐的蜜蜂 人气:2

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。

加载全部内容

相关教程
猜你喜欢
用户评论