Blog React 18 新特性（三）：渐变更新

React 18 新特性（三）：渐变更新

Open beichensky opened this issue 3 years ago • 0 comments

前言

本文已收录在 Github: https://github.com/beichensky/Blog 中，欢迎 Star，欢迎 Follow！

在 React 18 新特性（一）：自动批量更新一文中提到：在 React 新版本中，更新会有优先级的顺序。

那如果希望更新时进行低优先级的处理，应该如何做呢，就是今天讲到的主题：渐变更新。

如果还不知道如何搭建 React18 的体验环境，可以先查看这篇文章：使用 Vite 尝鲜 React 18

一、startTransition：渐变更新

startTransition 接受一个回调函数，可以将放入其中的 setState 更新推迟
允许组件将速度较慢的更新延迟渲染，以便能够立即渲染更重要的更新

举个例子

先来看一个例子，在使用谷歌或者百度搜索时，都会遇到如下的场景：

这里的展示分为两部分

一部分是输入框中的搜索内容
另一部分是展示的联想内容。

从用户的角度进行分析：

输入框中的内容是需要即时更新的
而联想出来的内容是需要进行请求或者加载的，甚至于最开始的时候联想的不准确，用不到。所以用户可以接受这部分内容有一定延迟。

那在这种情况下，用户的输入就是高优先级操作，而联想区域的变化就属于低优先级的操作。

模拟代码实现这个例子

我们写一段代码来实现一下这个搜索框。

App.jsx

import React, { useEffect, useState, startTransition } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    const [value, setValue] = useState('');
    const [keywords, setKeywords] = useState([]);

    useEffect(() => {
        const getList = () => {
            const list = value
                ? Array.from({ length: 10000 }, (_, index) => ({
                      id: index,
                      keyword: `${value} -- ${index}`,
                  }))
                : [];
            return Promise.resolve(list);
        };
        getList().then(res => setKeywords(res));
    }, [value]);

    return (
        <>
            <input value={value} onChange={e => setValue(e.target.value)} />
            <ul>
                {keywords.map(({ id, keyword }) => (
                    <li key={id}>{keyword}</li>
                ))}
            </ul>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

然后我们先看一下现在的效果（这里暂时不讨论防抖或者节流）：

缓慢加载

可以看到，不仅联想区域的内容加载缓慢，甚至用户的交互内容也反应迟钝。

既然刚才说到了低优先级更新，那么此时，我们是否可以让联想区域的内容低优更新，以避免抢占用户操作的更新呢？

接下来主角登场，使用 startTransition 对代码进行改造。

启用渐变更新

App.jsx

import React, { useEffect, useState, startTransition } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    const [value, setValue] = useState('');
    const [keywords, setKeywords] = useState([]);

    useEffect(() => {
        const getList = () => {
            const list = value
                ? Array.from({ length: 10000 }, (_, index) => ({
                      id: index,
                      keyword: `${value} -- ${index}`,
                  }))
                : [];
            return Promise.resolve(list);
        };
-        //getList().then(res => setKeywords(res));
        // 仅仅只是将 setKeywords 用 startTransition 包裹一层，即可启用渐变更新
+        getList().then(res => startTransition(() => setKeywords(res)));
    }, [value]);

    return (
        <>
            <input value={value} onChange={e => setValue(e.target.value)} />
            <ul>
                {keywords.map(({ id, keyword }) => (
                    <li key={id}>{keyword}</li>
                ))}
            </ul>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

重新执行后，看看此时的效果：

迅速响应

可以看到，此时界面的响应速度比之前快了许多。

二、useDeferredValue：返回一个延迟响应的值

useDeferredValue 相当于是 startTransition(() => setState(xxx)) 的语法糖，在内部会调用一次 setState，但是此更新的优先级更低

那么我们用 useDeferredValue 改写一下上面的代码，看看是否有哪里不一样呢？

App.jsx

import React, { useEffect, useState, useDeferredValue } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    const [value, setValue] = useState('');
    const [keywords, setKeywords] = useState([]);
+    const text = useDeferredValue(value);

    useEffect(() => {
        const getList = () => {
            const list = value
                ? Array.from({ length: 10000 }, (_, index) => ({
                      id: index,
                      keyword: `${value} -- ${index}`,
                  }))
                : [];
            return Promise.resolve(list);
        };
        getList().then(res => setKeywords(res));
        // 只是将依赖的值由 value 更新为 text
+    }, [text]);

    return (
        <>
            <input value={value} onChange={e => setValue(e.target.value)} />
            <ul>
                {keywords.map(({ id, keyword }) => (
                    <li key={id}>{keyword}</li>
                ))}
            </ul>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

看看此时界面的响应速度：

同样迅速响应

可以看到此时的响应速度和使用 startTransition 时相差无几。

三、useTransition

还记得在 React 18 新特性（二）：Suspense & SuspenseList 一文中使用过的 Suspense 组件以及 User 组件吗？我们在这两个组件的基础上，展示一下 useTransition 的用法和特性。

举个异步加载的例子

假设我们目前需要使用 Suspense 来包裹 User 组件，此时 User 组件内部会有网络请求等耗时操作。点击按钮，会触发 User 组件的更新，重新进行耗时操作获取数据

App.jsx

import React, { Suspense, useState } from 'react';
import ReactDOM from 'react-dom';

// 对 promise 进行一层封装
function wrapPromise(promise) {
    let status = 'pending';
    let result;
    let suspender = promise.then(
        r => {
            status = 'success';
            result = r;
        },
        e => {
            status = 'error';
            result = e;
        }
    );
    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            } else if (status === 'success') {
                return result;
            }
        },
    };
}

// 网络请求，获取 user 数据
const requestUser = id =>
    new Promise(resolve =>
        setTimeout(() => resolve({ id, name: `用户${id}`, age: 10 + id }), id * 100)
    );

// User 组件
const User = props => {
    const user = props.resource.read();
    return <div>当前用户是: {user.name}</div>;
};

// 通过 id 获取对应 resource
const getResource = id => wrapPromise(requestUser(id));

const App = () => {
    const [resource, setResource] = useState(getResource(10));

    return (
        <>
            <Suspense fallback={<div>Loading...</div>}>
                <User resource={resource} />
            </Suspense>
            <button onClick={() => setResource(wrapPromise(requestUser(1)))}>切换用户</button>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

OK，那我们看一下此时的效果哈：

可以看到，第一次加载时，会出现 loading 效果，这是正常的，但是在点击按钮，切换用户时，依然会有 loading 效果的出现，这本来没有问题，但是当请求速度很快时，就会出现闪一下的问题。此时应该不需要 loading 的出现。

这个时候，useTransition 就派上用场了。

概念

useTransition 允许组件再切换到下一个界面之前等待内容加载，从而避免出现不必要的加载状态
允许组件将速度较慢的数据获取更新推迟到随后渲染（低优先级更新），以便能够立即渲染更重要的更新
useTransition 返回包含两个元素的数组：
- isPending: Boolean，通知我们是否正在等待过渡效果的完成
- startTransition: Function，用它来包裹需要延迟更新的状态

使用 useTransition 修改上述的例子

使用 useTransition 中返回的 startTransition 包裹需要更新的 setState，就会降低更新的优先级，并且会对界面进行缓冲，等待下一个界面准备就绪后直接进行更新。

App.jsx

import React, { Suspense, useState, useTransition } from 'react';
import ReactDOM from 'react-dom';

// 对 promise 进行一层封装
function wrapPromise(promise) {
    let status = 'pending';
    let result;
    let suspender = promise.then(
        r => {
            status = 'success';
            result = r;
        },
        e => {
            status = 'error';
            result = e;
        }
    );
    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            } else if (status === 'success') {
                return result;
            }
        },
    };
}

// 网络请求，获取 user 数据
const requestUser = id =>
    new Promise(resolve =>
        setTimeout(() => resolve({ id, name: `用户${id}`, age: 10 + id }), id * 100)
    );

// User 组件
const User = props => {
    const user = props.resource.read();
    return <div>当前用户是: {user.name}</div>;
};

// 通过 id 获取对应 resource
const getResource = id => wrapPromise(requestUser(id));

const App = () => {
    const [resource, setResource] = useState(getResource(10));
+    const [isPending, startTransition] = useTransition();

    return (
        <>
            <Suspense fallback={<div>Loading...</div>}>
                <User resource={resource} />
            </Suspense>
+            <button onClick={() => startTransition(() => setResource(wrapPromise(requestUser(1))))}>
                切换用户
            </button>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

可以看到，加载状态的 loading 就不会出现了，闪一下的情况消失了：

那么问题来了，如果耗时操作确实会花费很久的时间，没有 loading 的话，对于用户来说就没有任何的反馈了呀。

别急，这个时候第一个元素 isPending 就可以用起来啦：

App.jsx

import React, { Suspense, useState, useTransition } from 'react';
import ReactDOM from 'react-dom';

// 对 promise 进行一层封装
function wrapPromise(promise) {
    let status = 'pending';
    let result;
    let suspender = promise.then(
        r => {
            status = 'success';
            result = r;
        },
        e => {
            status = 'error';
            result = e;
        }
    );
    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            } else if (status === 'success') {
                return result;
            }
        },
    };
}

// 网络请求，获取 user 数据
const requestUser = id =>
    new Promise(resolve =>
        setTimeout(() => resolve({ id, name: `用户${id}`, age: 10 + id }), id * 100)
    );

// User 组件
const User = props => {
    const user = props.resource.read();
    return <div>当前用户是: {user.name}</div>;
};

// 通过 id 获取对应 resource
const getResource = id => wrapPromise(requestUser(id));

const App = () => {
    const [resource, setResource] = useState(getResource(10));
    const [isPending, startTransition] = useTransition();

    return (
        <>
            <Suspense fallback={<div>Loading...</div>}>
                <User resource={resource} />
            </Suspense>
+            {isPending ? <div>Loading</div> : null}
            <button
                onClick={() => startTransition(() => setResource(wrapPromise(requestUser(20))))}
            >
                切换用户
            </button>
        </>
    );
};

// 使用 react 18 新的并发模式写法进行 dom render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// legacy 旧模式
// ReactDOM.render(<App />, document.getElementById('root')!)

此时点击按钮切换用户，会有 2s 左右的等待时间，就可以展示出 loading 状态，用来提示用户：

isPending

所以，在使用 useTransition 时，一定要注意场景：

在明确知道耗时操作速度极快的情况下，可以直接使用返回值中的 startTransition
如果不能保证响应速度，还是需要使用 isPending 进行过渡状态的判断和展示
如果对于更新的优先级有较高的要求，可以不使用 useTransition

后记

好啦，关于 startTransition、useDeferredValue、useTransition 的用法和使用场景都已经介绍完了。

所有的代码均已在文中贴出。

文中有写的不对或不严谨的地方，欢迎大家能提出宝贵的意见，十分感谢。

如果喜欢或者有所帮助，欢迎 Star。

Aug 24 '21 09:08 beichensky

Blog
Blog copied to clipboard

React 18 新特性（三）：渐变更新

前言

一、startTransition：渐变更新

举个例子

模拟代码实现这个例子

启用渐变更新

二、useDeferredValue：返回一个延迟响应的值

三、useTransition

举个异步加载的例子

概念

使用 useTransition 修改上述的例子

相关链接

后记

Blog Blog copied to clipboard

React 18 新特性（三）：渐变更新

前言

一、startTransition：渐变更新

举个例子

模拟代码实现这个例子

启用渐变更新

二、useDeferredValue：返回一个延迟响应的值

三、useTransition

举个异步加载的例子

概念

使用 useTransition 修改上述的例子

相关链接

后记

Blog
Blog copied to clipboard