React19来了，新特性

千呼万唤的React19来了. 虽然现在还是beta版本，但是不耽误大家提前准备学习下

        今天medium的订阅推送了一个React19的新特性，觉得很不错，提炼点精华的说下

React19 是4月25号推出的beta版，从版本号大家已经可以了解到这是React的一大版本的升级.这也标志着18版本进入收尾阶段了.因为现在是beta版本，所以还有很多不确定性的功能和问题

 优化表单提交和更新(Form submissions and optimistic updates)

 大家肯定都遇到到过也解决过这种需求，提交一个表单，如果提交失败返回错误提示，提交成功存储db‘s server. 举个简单的例子:
 

import React, {useState, useCallback} from 'react'

const submitForm = async () => {/** form submit */}

export function Component () {
    const [formState, setFormState] = useState(null);
    const [isPending, setIsPending] = useState(false);

    const formAction = useCallback( async (e) => {
        e.prevenDefault();
        setIsPending(true);
        try {
            const result = await submitForm()
            setFormState(result)
        } catch (err) {
            setFormState({message:'Failed to complete action'})
        }
        setIsPending(false)
    },[])
    // 这里使用的useCallback防止deep render
    return (
        <form onSubmit={formAction}>
            {/** Form Template */}
        </form>
    )
}

 代码很简单.概述下在React18中以非紧急的方式从一个试图过渡到另一个试图的过程就是transitions(过渡) .在React19中支持转场(过渡)异步函数.而去可以使用useTransitions这个hook挂载并在异步数据获取过程中管理加载指示符或占位符的显示。

1.1 useActionState

新的hooks useActionState

支持3个三个参数
1. action：当form表单trigger的时候调用的函数

2. initial state:表单初始化的状态

3.一个绝对路径:指明表单要跳转的页面link ---> optional的选配

返回值也有三个
1.state: 当前返回的表单状态

2. dispatch:从aciton tirgger的函数 (redux 熟悉的很好理解)

3.isPending:一个boolean类型的状态isPending

引用一张图:画的很好

当表单提交的时候，作为useActionState的第一参数(action)传递下的函数将被触发.并返回我们期望提交是否成功的状态.Action 的函数接受2个参数，一个当前的from状态和触发表单时的数据.

1.2 使用实例
 

import {useActionState} from 'react'

const submitForm = async (formData) => {
    /* from submit fn that call API */
}

const action = async (currentState, formData) => {
    try {
        const result = await submitForm(formData)
        return {message: result}
    } catch (error) {
        return {message: error.message}
    }
}
export function Component () {
    const [state, dispatch, isPending] = useActionState(action, null)
    //...
}

这就是一个基本的架子.接下来完善下我们的isPending, state. dispatch.

1.3 <form> 的Action

在React19中，from 元素扩展了属性action 它能获取到一个提交触发的action的函数.也就是我们传递过来的dispatch

    return (
        <form action={dispatch}>
            {/** ...*/}
        </form>
    )

完整代码：
 

import {useActionState} from 'react'

const submitForm = async (formData) => {
    /* from submit fn that call API */
}

const action = async (currentState, formData) => {
    try {
        const result = await submitForm(formData)
        return {message: result}
    } catch (error) {
        return {message: error.message}
    }
}
export function Component () {
    const [state, dispatch, isPending] = useActionState(action, null)
    
    return (
        <form action={dispatch}>
            <input type="text" name="text" disabled={isPending} />
            <button type="submit" disabled={isPending}> 
                Add Todo 
            </button>
            {state.message && <h4>{state.message}</h4>}
        </form>
    )
}

不错吧，对比下React18的时候，是不是简洁很多.不必担心再忘记使用useCallback勾子了.

1.2 useFormStatus

在React19中新的加的一个勾子
获取上一次提交的状态信息

import{ useFormStatus} from 'react'

export function NestedComponent() { 
    // 获取表单信息
    const {pending, data, method, action} = useFormStatus();
   // 这里写个blog没提到的官网写法：
   // const status = useFormStatus();
    return (
        /* tempalte */
    )
}

来个