脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React18 useDeferredValue

React18中的useDeferredValue示例详解

 更新时间：2022年03月16日 11:16:00   作者：喵爸的小作坊  
这篇文章主要介绍了React18中的useDeferredValue的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

接着上一篇React18的简介和自动批处理的特性，今天我们来聊下useDeferredValue。

有什么用？

lets you defer updating the less important parts of the screen

我们翻译下，允许用户推迟屏幕更新优先级不高部分。

说“人话”就是，如果说某些渲染比较消耗性能，比如存在实时计算和反馈，我们可以使用这个Hook降低其计算的优先级，使得避免整个应用变得卡顿。

较多的场景可能就在于用户反馈输入上。比如百度的输入框，用户可能输入的很快，相信大家还有个体会，就是我们使用输入法的时候，中间还在选打哪个字呢，拼音或者输入片段就已经被搜索了。

这里就存在问题了，用户连续输入的时候，不停地在进行计算或者调用后端服务，其实中间态的很多输入片段的信息是无用的，既浪费了服务资源，也因为React应用实时更新和JS的单线程特性导致其他渲染任务卡顿。那我们使用useDeferredValue来使用下，如何避免这个问题。

实操起来

还是沿用上期的代码项目

import React, {useState, useEffect} from 'react';

const List = (props) => {
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count => count + 1);
    setTimeout(() => {
      setList([
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
      ]);
    }, 500);
  }, [props.text]);
  return [<p>{'我被触发了' + count + '次'}</p>
    , <ul>{list.map(item => <li>Hello:{item.name} value:{item.value}</li>)}</ul>]
};

export default function App() {
  const [text, setText] = useState("喵爸");

  const handleChange = (e) => {
    setText(e.target.value);
  };
  return (
    <div className="App">
      <input value={text} onChange={handleChange}/>
      <List text={text}/>
    </div>
  );
};

一般我们的代码是这样写的。输入框的值变化的时候，我们使用setTimeout来模拟下向后端请求数据，或者大量计算的耗时操作。这个时候只要输入框的内容发生变化就会触发useEffect，我们用count来进行计数。

\

我们每次的输入或者变化，都会触发一次更新，那我们接下来改造下。

我们仅需要修改外部组件，使得传入List的Text变量是一个延迟更新的值。

细心的同学可以发现了，咦？！好像没什么区别呀。其实原因在于，首先timeoutMs这个参数的含义是延迟的值允许延迟多久，事实上网络和设备允许的情况下，React会尝试使用更低的延迟。这一点是不是非常nice呀。

跟防抖的区别

估计有很多同学在一开始看到笔者这个场景的时候会去想，这就是防抖吗？一开始故意卖了个关子，没有提防抖的概念。这里跟防抖还是有比较大的区别的，那么不论机器快慢，网络情况如何，始终会在用户停止输入后的固定之间才执行。笔者直接放出两者的比较，为了简单起见，我们使用下ahooks的useDebounce，大家可以对比理解下。

import React, {useState, useEffect, useDeferredValue} from 'react';
import {useDebounce} from 'ahooks';
const List = (props) => {
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count => count + 1);
    setTimeout(() => {
      setList([
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
      ]);
    }, 500);
  }, [props.text]);
  return [<p>{'我被触发了' + count + '次'}</p>,
    <ul>{list.map(item => <li>Hello:{item.name} value:{item.value}</li>)}</ul>]
};

export default function App() {
  const [text, setText] = useState("喵爸");
  const deferredText = useDeferredValue(text, {timeoutMs: 1000});
  const debouncedValue = useDebounce(text, { wait: 1000 });
  const handleChange = (e) => {
    setText(e.target.value);
  };
  return (
    <div className="App">
      <input value={text} onChange={handleChange}/>
      <List text={deferredText}/>
      <List text={debouncedValue}/>
    </div>
  );
};

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

您可能感兴趣的文章:

相关文章

  • React组件对子组件children进行加强的方法

    React组件对子组件children进行加强的方法

    这篇文章主要给大家介绍了关于React组件中对子组件children进行加强的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • React创建对话框组件的方法实例

    React创建对话框组件的方法实例

    在项目开发过程中,对于复杂的业务选择功能很常见,下面这篇文章主要给大家介绍了关于React创建对话框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • React触发render的实现方法

    React触发render的实现方法

    这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • JavaScript React如何修改默认端口号方法详解

    JavaScript React如何修改默认端口号方法详解

    这篇文章主要介绍了JavaScript React如何修改默认端口号方法详解，文中通过步骤图片解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • react子组件接收的props赋值给state的陷阱问题

    react子组件接收的props赋值给state的陷阱问题

    这篇文章主要介绍了react子组件接收的props赋值给state的陷阱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React-Native中禁用Navigator手势返回的示例代码

    React-Native中禁用Navigator手势返回的示例代码

    本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-09-09
  • 使用react在修改state中的数组和对象数据的时候(setState)

    使用react在修改state中的数组和对象数据的时候(setState)

    这篇文章主要介绍了使用react在修改state中的数组和对象数据的时候(setState)，具有很好的参考价值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • react中如何使用定义数据并监听其值

    react中如何使用定义数据并监听其值

    这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React常见跨窗口通信方式实例详解

    React常见跨窗口通信方式实例详解

    这篇文章主要为大家介绍了React常见跨窗口通信方式实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论