K60 Pro官方停產(chǎn) 第三方瞬間漲價
雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會補貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機在停產(chǎn)之后
這是一個超強的特性。仔細看完你就能體會。
在 html 的基礎(chǔ)知識中，表單是很重要的一個環(huán)節(jié)。但是由于各種原因，原生的表單開發(fā)方式相關(guān)知識被部分前端開發(fā)所遺忘，他們對 form action，formdata 有一種陌生感。
因此，當(dāng)看到有消息稱 React 19 支持了 form action 之后，許多前端感覺有點懵。不知道這是啥。這篇文章就先給大家科普一下相關(guān)的知識。
先來看一段簡單的代碼。
<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>當(dāng)我們使用表單 form 元素時，內(nèi)部的表單元素可以根據(jù) name 屬性與 value 值自動組合成一個完整的序列化表單對象。我們不再需要額外去拼接他們。
合成的序列化對象，我們稱之為 FormData， 這是一個特殊的對象。我們可以直接通過如下方式獲取到該對象。
let formdata = new FormData(form)console.log(formdata.get('fname'))console.log(formdata.get('lname'))i
我們無法直接觀察到 FormData 的值，需要使用 .get 方法來獲取。
FormData 也可以被網(wǎng)絡(luò)請求支持，例如我們可以把 FormData 對象作為 fetch 請求的 body，直接發(fā)送。
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}在這個案例中，當(dāng) type='submit' 的按鈕點擊提交時，onsubmit 就會觸發(fā)，我們可以在這個回調(diào)函數(shù)里執(zhí)行自己的提交邏輯。
?
HTTP 中 content-type 字段有專門支持 FormData 的值，如下所示：
Content-Type: multipart/form-data除此之外，我們可以使用 form 元素的 action 屬性來簡化提交。不過它的表現(xiàn)會不太一樣。
action 接收一個 URL 作為參數(shù)，可以是絕對路徑，也是可以相對路徑。它表示攜帶表單數(shù)據(jù)向該地址發(fā)送請求。默認情況下頁面會跳轉(zhuǎn)到指定的 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>服務(wù)端可以攔截該地址，并定義響應(yīng)行為。
這樣做的好處就是我們可以簡化提交行為的代碼。無需使用 JavaScript 對邏輯進行任何額外的處理，就能完成一次提交操作。在沒有額外要求的情況下，我們可以非常方便的使用這種方式來提交表單數(shù)據(jù)，上傳文件等。
FormData API 如下圖所示。
學(xué)習(xí)了這些基礎(chǔ)知識之后，我們來完成一個比較簡單的案例。我們在表單中輸入信息，并把信息記錄展示在一個列表中。案例演示效果如下
首先我們要定義一個數(shù)據(jù)，用于存儲列表。
const [posts, setPosts] = useState([])然后在 jsx 中，定義一個表單內(nèi)容，和列表渲染。
<div> <div>基礎(chǔ)的表單提交案例</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 回調(diào)函數(shù)能拿到最新的 formdata。然后把對應(yīng)的數(shù)據(jù)拿出來，設(shè)置到 posts 里面即可。
function action(data) { const title = data.get('title') const content = data.get('content') if (title && content) { setPosts([...posts, {title, content}]) }}我們可以簡單擴展一下，在這個基礎(chǔ)之上做一些校驗。我們把其中一個 input 做一些簡單的調(diào)整。
<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) }}
這里面有許多狀態(tài)可以支持我們做許多自己的擴展。
這里大家需要注意的一個小細節(jié)就是，許多針對表單功能增強的 API，都不是從 react 中引入，而是從 react-dom 中引入。
第一時間我還沒想通這到底咋回事。感覺好奇怪。后來我才意識到，這對于服務(wù)端渲染有著巨大的劃時代的重要意義。
在評估網(wǎng)頁性能中，有一個重要的性能指標：TTI：可交互時間。頁面加載完成，并且首屏顯示，并且頁面可以交互。
但是，在以前的服務(wù)端渲染項目中，想要頁面元素可以被點擊，可交互，需要經(jīng)歷一個重要的過程，那就是 Hydrate 水合。意思就是說，第一時間從服務(wù)端給到頁面上的只是字符串，并不具備可交互功能，它需要瀏覽器渲染之后，變成 DOM 元素，再通過 React 水合之后，再變成 React 組件，然后才可以正常點擊交互。
因此，React 服務(wù)端渲染項目雖然首屏直出理論上會快一些，但是 TTI 要多經(jīng)歷一個水合的過程，那么可交互時間等待就比較久了。
?
其實也不一定，處理不好，服務(wù)端渲染項目也會更慢。
React 19 支持的 form action，實際上是極大的利用了瀏覽器的自帶的表單能力，它要可交互，并不需要經(jīng)歷水合過程，瀏覽器渲染成 DOM 就可以正常交互了。
道友們，誰懂啊，這就有點厲害了。
?
有的服務(wù)端渲染項目首屏渲染時間只需要不到 1s，但是首次可交互時間，能長達 8s 之久。從這個簡單的數(shù)據(jù)對比，你就能領(lǐng)會不需要水合是多大的提升了。
這不僅在客戶端組件中，直接掙脫了之前受控組件在性能上的桎梏，還更進一步在服務(wù)端渲染項目有更強的體現(xiàn)。如果一旦跟 next.js 有機結(jié)合...
不得不佩服 React 團隊在設(shè)計項目架構(gòu)解決方案上的超前思維。
React form Action 是一個很小的知識點，但是它代表的是表單開發(fā)的另一種思路，是一種開發(fā)方式的隆重回歸。因此這要求我們對 HTML 本身已經(jīng)支持的表單能力要有所了解。我們在后續(xù)的開發(fā)使用中，會逐漸弱化受控組件的使用，這會帶來開發(fā)體驗和性能上的提升。
除此之外，React 在表單開發(fā)中還提供了許多功能增強的 hook，我們在后續(xù)的分享慢慢學(xué)習(xí)。
本文鏈接：http://www.tebozhan.com/showinfo-26-100724-0.htmlReact 支持 Form Action 是在作妖？不，它是一種重磅回歸
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號