React特征Form?單向數(shù)據(jù)流示例詳解
引言
今天將之前的內(nèi)容做個(gè)系統(tǒng)整理,結(jié)合 React Form 案例, 來(lái)了解下為何React推薦單向數(shù)據(jù)流,如果采用雙向管理,可能的問(wèn)題 (關(guān)于React Form案例,可參考相關(guān)文章 - 學(xué)習(xí)React的特征(二) - React Form
集中狀態(tài)管理
首先來(lái)看之前的React Form, 若采用單向數(shù)據(jù)流
import * as React from 'react'; const Useremail = props => <input type="email" {...props} /> const Userpassword = props => <input type="password" {...props} /> const SubmitButton = props => <button type="submit" {...props} /> const LoginForm = () => { // LoginForm狀態(tài)變化 => Useremail/Userpassword組件 const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const handleEmail = (e) => { setEmail(e.target.value); }; const handlePassword = (e) => { setPassword(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); alert(email + ' ' + password); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <Useremail id="email" type="text" value={email} onChange={handleEmail} /> </div> <div> <label htmlFor="password">Password</label> <Userpassword id="password" type="password" value={password} onChange={handlePassword} /> </div> <SubmitButton type="submit">Submit</SubmitButton> </form> ); }; export { LoginForm };
可以看到, 每次Useremail
or Password
輸入發(fā)生改變時(shí),LoginForm
中的email
與password
狀態(tài)動(dòng)態(tài)產(chǎn)生改變
雙向數(shù)據(jù)流
import * as React from 'react'; // Useremail/Userpassword組件狀態(tài)變化 => LoginForm父組件 const Useremail = ({updateUseremail, ...props}) => <input type="email" onChange={e => updateUseremail(e.target.value)} {...props} /> const Userpassword = ({updateUserpassword, ...props}) => <input type="password" onChange={e => updateUserpassword(e.target.value)} {...props} /> const SubmitButton = props => <button type="submit" {...props} /> const LoginForm = () => { // LoginForm狀態(tài)變化 => Useremail/Userpassword組件 const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const handleSubmit = (e) => { e.preventDefault(); alert(email + ' ' + password); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <Useremail id="email" type="text" value={email} updateUseremail={setEmail} /> </div> <div> <label htmlFor="password">Password</label> <Userpassword id="password" type="password" value={password} updateUserpassword={setPassword} /> </div> <SubmitButton type="submit">Submit</SubmitButton> </form> ); }; export { LoginForm };
實(shí)際執(zhí)行這兩個(gè)程序,得到的結(jié)果是一致,看起來(lái)兩者沒(méi)有什么區(qū)別
那為何不選擇雙向數(shù)據(jù)流
- 代碼維護(hù)
以上代碼可以發(fā)現(xiàn),一旦LoginForm發(fā)生問(wèn)題,雙向數(shù)據(jù)流需要在多個(gè)子組件和父組件中同時(shí)尋找狀態(tài)異常的原因,當(dāng)程序逐漸趨于復(fù)雜化,后期維護(hù)會(huì)變得異常困難
- 組件復(fù)用
每次用戶狀態(tài)需求發(fā)生新的變化,每個(gè)子組件都要相應(yīng)調(diào)整,造成組件在實(shí)際使用中難以復(fù)用
- 應(yīng)用升級(jí)
另外,當(dāng)程序需要做整體升級(jí),因?yàn)闋顟B(tài)分散在各個(gè)組件,將會(huì)導(dǎo)致難以實(shí)行
小結(jié)
組件設(shè)計(jì)成響應(yīng)式,從長(zhǎng)遠(yuǎn)看,更符合React推薦的設(shè)計(jì)模式
以上就是React特征Form 單向數(shù)據(jù)流示例詳解的詳細(xì)內(nèi)容,更多關(guān)于React特征Form 單向數(shù)據(jù)流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React+TS+IntersectionObserver實(shí)現(xiàn)視頻懶加載和自動(dòng)播放功能
通過(guò)本文的介紹,我們學(xué)習(xí)了如何使用 React + TypeScript 和 IntersectionObserver API 來(lái)實(shí)現(xiàn)一個(gè)視頻播放控制組件,該組件具有懶加載功能,只有在用戶滾動(dòng)頁(yè)面且視頻進(jìn)入視口時(shí)才開(kāi)始下載視頻資源,需要的朋友可以參考下2023-04-04useEffect?返回函數(shù)執(zhí)行過(guò)程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過(guò)程源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04react-router-dom?V6的配置使用實(shí)踐
本文主要介紹了react-router-dom?V6的配置使用實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題及解決方法
這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題及解決方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07React+Redux實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList
這篇文章主要為大家詳細(xì)介紹了React+Redux實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來(lái)很相似,但它們彼此之間還是有很大的區(qū)別的,隨著小編一起來(lái)學(xué)習(xí)吧2023-04-04React庫(kù)之react-beautiful-dnd介紹及其使用過(guò)程
在使用React構(gòu)建Web應(yīng)用程序時(shí),拖拽功能是一項(xiàng)常見(jiàn)需求,為了方便實(shí)現(xiàn)拖拽功能,我們可以借助第三方庫(kù)react-beautiful-dnd,本文將介紹react-beautiful-dnd的基本概念,并結(jié)合實(shí)際的項(xiàng)目代碼一步步詳細(xì)介紹其使用過(guò)程,需要的朋友可以參考下2023-11-11