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