MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
這是一個超強的特性。仔細看完你就能體會。
在 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.tebozhan.com/showinfo-26-100724-0.htmlReact 支持 Form Action 是在作妖？不，它是一種重磅回歸
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 電商并發減庫存設計，如何做到不超賣
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號