这是一个超强的特性。仔细看完你就能体会。
在 html 的基础知识中，表单是很重要的一个环节。但是由于各种原因，原生的表单开发方式相关知识被部分前端开发所遗忘，他们对 form action，formdata 有一种陌生感。
因此，当看到有消息称 React 19 支持了 form action 之后，许多前端感觉有点懵。不知道这是啥。这篇文章就先给大家科普一下相关的知识。
先来看一段简单的代码。
<form id="form" method="get"> First name: <input type="text" value="Jake" name="fname"> Last name: <input type="text" value="Ma" name="lname"> <input type="submit" value="提交"></form>当我们使用表单 form 元素时，内部的表单元素可以根据 name 属性与 value 值自动组合成一个完整的序列化表单对象。我们不再需要额外去拼接他们。
合成的序列化对象，我们称之为 FormData， 这是一个特殊的对象。我们可以直接通过如下方式获取到该对象。
let formdata = new FormData(form)console.log(formdata.get('fname'))console.log(formdata.get('lname'))i
我们无法直接观察到 FormData 的值，需要使用 .get 方法来获取。
FormData 也可以被网络请求支持，例如我们可以把 FormData 对象作为 fetch 请求的 body，直接发送。
form.onsubmit = async e => { e.preventDefault() const response = await fetch('/post/user', { method: 'POST', body: new FormData(form) }) let res = await response.json() // do something}在这个案例中，当 type='submit' 的按钮点击提交时，onsubmit 就会触发，我们可以在这个回调函数里执行自己的提交逻辑。
✓
HTTP 中 content-type 字段有专门支持 FormData 的值，如下所示：
Content-Type: multipart/form-data除此之外，我们可以使用 form 元素的 action 属性来简化提交。不过它的表现会不太一样。
action 接收一个 URL 作为参数，可以是绝对路径，也是可以相对路径。它表示携带表单数据向该地址发送请求。默认情况下页面会跳转到指定的 URL 地址。
<form id="form" action="xx.html" method="post"> First name: <input type="text" value="Jake" name="fname"> Last name: <input type="text" value="Ma" name="lname"> <input type="submit" value="提交"></form>服务端可以拦截该地址，并定义响应行为。
这样做的好处就是我们可以简化提交行为的代码。无需使用 JavaScript 对逻辑进行任何额外的处理，就能完成一次提交操作。在没有额外要求的情况下，我们可以非常方便的使用这种方式来提交表单数据，上传文件等。
FormData API 如下图所示。
学习了这些基础知识之后，我们来完成一个比较简单的案例。我们在表单中输入信息，并把信息记录展示在一个列表中。案例演示效果如下
首先我们要定义一个数据，用于存储列表。
const [posts, setPosts] = useState([])然后在 jsx 中，定义一个表单内容，和列表渲染。
<div> <div>基础的表单提交案例</div> <form action={action}> <div className="form_item"> <div className="label">Title</div> <input name='title' type="text" placeholder='Enter title' /> </div> <div className="form_item"> <div className="label">Name</div> <input name='content' type="text" placeholder='Enter you name' /> </div> <div className="form_item"> <button className='primary' type='submit'>Submit</button> </div> </form> <ul className='_07_list'> {posts.map((post, index) => ( <div key={`${post.title}-${index}`} className='_07_item'> <h2>{post.title}</h2> <p>{post.content}</p> </div> ))} </ul></div>提交之后的逻辑在 action 中处理，action 回调函数能拿到最新的 formdata。然后把对应的数据拿出来，设置到 posts 里面即可。
function action(data) { const title = data.get('title') const content = data.get('content') if (title && content) { setPosts([...posts, {title, content}]) }}我们可以简单扩展一下，在这个基础之上做一些校验。我们把其中一个 input 做一些简单的调整。
<input onInput={onInput} name='content' type="text" placeholder='Enter you name' required pattern={'abc'}/>在 css 中，新增如果校验不通过的样式。
input:invalid { border: 1px dashed red;}演示效果如下：
我们还可以通过 input 的 onInput 事件对验证样式进行自定义。
function onInput(event) { let input = event.target console.log(input.validity) if (input.validity.valid) { console.log('xxxxx', input.validity) }}
这里面有许多状态可以支持我们做许多自己的扩展。
这里大家需要注意的一个小细节就是，许多针对表单功能增强的 API，都不是从 react 中引入，而是从 react-dom 中引入。
第一时间我还没想通这到底咋回事。感觉好奇怪。后来我才意识到，这对于服务端渲染有着巨大的划时代的重要意义。
在评估网页性能中，有一个重要的性能指标：TTI：可交互时间。页面加载完成，并且首屏显示，并且页面可以交互。
但是，在以前的服务端渲染项目中，想要页面元素可以被点击，可交互，需要经历一个重要的过程，那就是 Hydrate 水合。意思就是说，第一时间从服务端给到页面上的只是字符串，并不具备可交互功能，它需要浏览器渲染之后，变成 DOM 元素，再通过 React 水合之后，再变成 React 组件，然后才可以正常点击交互。
因此，React 服务端渲染项目虽然首屏直出理论上会快一些，但是 TTI 要多经历一个水合的过程，那么可交互时间等待就比较久了。
✓
其实也不一定，处理不好，服务端渲染项目也会更慢。
React 19 支持的 form action，实际上是极大的利用了浏览器的自带的表单能力，它要可交互，并不需要经历水合过程，浏览器渲染成 DOM 就可以正常交互了。
道友们，谁懂啊，这就有点厉害了。
✓
有的服务端渲染项目首屏渲染时间只需要不到 1s，但是首次可交互时间，能长达 8s 之久。从这个简单的数据对比，你就能领会不需要水合是多大的提升了。
这不仅在客户端组件中，直接挣脱了之前受控组件在性能上的桎梏，还更进一步在服务端渲染项目有更强的体现。如果一旦跟 next.js 有机结合...
不得不佩服 React 团队在设计项目架构解决方案上的超前思维。
React form Action 是一个很小的知识点，但是它代表的是表单开发的另一种思路，是一种开发方式的隆重回归。因此这要求我们对 HTML 本身已经支持的表单能力要有所了解。我们在后续的开发使用中，会逐渐弱化受控组件的使用，这会带来开发体验和性能上的提升。
除此之外，React 在表单开发中还提供了许多功能增强的 hook，我们在后续的分享慢慢学习。
本文链接：http://www.28at.com/showinfo-26-100724-0.htmlReact 支持 Form Action 是在作妖？不，它是一种重磅回归
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 电商并发减库存设计，如何做到不超卖
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
