欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React特征Form?單向數(shù)據(jù)流示例詳解

 更新時間:2022年09月17日 16:25:49   作者:Flag還是要立的  
這篇文章主要為大家介紹了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中的emailpassword狀態(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+TS+IntersectionObserver實現(xiàn)視頻懶加載和自動播放功能

    通過本文的介紹,我們學習了如何使用 React + TypeScript 和 IntersectionObserver API 來實現(xiàn)一個視頻播放控制組件,該組件具有懶加載功能,只有在用戶滾動頁面且視頻進入視口時才開始下載視頻資源,需要的朋友可以參考下
    2023-04-04
  • react父組件調(diào)用子組件的方式匯總

    react父組件調(diào)用子組件的方式匯總

    在react中常用props實現(xiàn)子組件數(shù)據(jù)到父組件的傳遞,但是父組件調(diào)用子組件的功能卻不常用,下面這篇文章主要給大家介紹了關于react父組件調(diào)用子組件的相關資料,需要的朋友可以參考下
    2022-08-08
  • useEffect?返回函數(shù)執(zhí)行過程源碼解析

    useEffect?返回函數(shù)執(zhí)行過程源碼解析

    這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • react-router-dom?V6的配置使用實踐

    react-router-dom?V6的配置使用實踐

    本文主要介紹了react-router-dom?V6的配置使用實踐,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 關于getDerivedStateFromProps填坑記錄

    關于getDerivedStateFromProps填坑記錄

    這篇文章主要介紹了關于getDerivedStateFromProps填坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • React.js?Gird?布局編寫鍵盤組件

    React.js?Gird?布局編寫鍵盤組件

    這篇文章主要介紹了React.js?Gird?布局編寫鍵盤組件,Grid?布局則是將容器劃分成"行"和"列",產(chǎn)生單元格,然后指定"項目所在"的單元格,可以看作是二維布局
    2022-09-09
  • react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應的問題及解決方法

    react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應的問題及解決方法

    這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應的問題及解決方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • React+Redux實現(xiàn)簡單的待辦事項列表ToDoList

    React+Redux實現(xiàn)簡單的待辦事項列表ToDoList

    這篇文章主要為大家詳細介紹了React+Redux實現(xiàn)簡單的待辦事項列表ToDoList,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • 詳解React中的useMemo和useCallback的區(qū)別

    詳解React中的useMemo和useCallback的區(qū)別

    React中的useMemo和useCallback是兩個重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個Hooks看起來很相似,但它們彼此之間還是有很大的區(qū)別的,隨著小編一起來學習吧
    2023-04-04
  • React庫之react-beautiful-dnd介紹及其使用過程

    React庫之react-beautiful-dnd介紹及其使用過程

    在使用React構建Web應用程序時,拖拽功能是一項常見需求,為了方便實現(xiàn)拖拽功能,我們可以借助第三方庫react-beautiful-dnd,本文將介紹react-beautiful-dnd的基本概念,并結合實際的項目代碼一步步詳細介紹其使用過程,需要的朋友可以參考下
    2023-11-11

最新評論