React19前瞻

React19马上就要来了

我们一起看一下19有什么实用的新特性。

useTransition

在之前的代码中，如果我们需要管理我们的是否在加载中的状态时，我们会用useState创建一个变量来保存。现在我们可以使用下面这种方式：

before:

import { useState } from 'react';

export default function LoginForm() {
    const [username, setUsername] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    
    const handleLogin = async () => {
        setIsLoading(true);
        if (!username.trim() || !password.trim()) { return; }
        const res = await login({username, password});
        setIsLoading(false);
        redirect('/blog');
    }
    
    return (
        <div>
            <input value={username} onChange={(e) => setUsername(e.target.value)} />
            <button onClick={handleLogin}>登录</button>
        </div>
    )
}

now:

// ...
const [isLoading, startTansition] = useTansition();

const handleLogin = async () => {
    startTransition(async () => {
        const res = await login({username, password});
        redirect('/blog');
    })
}
// ...

useActionState

表单提交

export default function BlogCard() {
    const [res, submitAction, isPending] = useActionState(
        async (preState, formData) => {
            const name = formData.get('name');
            const res = await updateName(name)
        },
        null
    )
    
    return (
        <form>
            <input type='text' name='name' />
            <button type='submit' disabled={isPending}>提交</button>
        </form>
    )
}

formData中保存了表单元素的状态，可以用get方法进行取值操作。

Actions 也与 React 19 的新 <form> 功能集成在 react-dom 中。我们已经添加了对将函数作为 <form>、<input> 和 <button> 元素的 action 和 formAction 属性的支持，以便使用 Actions 自动提交表单

useOptimistic

在一些安全影响小的地方，我们可能在请求返回之前，需要改变页面的状态（点赞或修改文字），我们就需要乐观的展示最终状态。

function ChangeName({currentName, onUpdateName}) {  

    const [optimisticName, setOptimisticName] = useOptimistic(currentName);  

    const submitAction = async formData => {  
        const newName = formData.get("name");  
        setOptimisticName(newName);  
        const updatedName = await updateName(newName);  
        onUpdateName(updatedName);  
    };  
    
    return (  
        <form action={submitAction}>  
            <p>Your name is: {optimisticName}</p>  
            <p>  
                <label>Change Name:</label>  
                <input  
                    type="text"  
                    name="name"  
                    disabled={currentName !== optimisticName}  
                />  
            </p>  
        </form>  
    );  
}

useOptimistic Hook 会在 updateName 请求进行时立即渲染 optimisticName。当更新完成或出错时，React 将自动切换回 currentName 值。