日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React特征Form?單向數據流示例詳解_React

作者：Flag還是要立的 ? 更新時間： 2022-11-09 編程語言

引言

今天將之前的內容做個系統整理，結合 React Form 案例， 來了解下為何React推薦單向數據流，如果采用雙向管理，可能的問題 (關于React Form案例，可參考相關文章 - 學習React的特征（二） - React Form

集中狀態管理

首先來看之前的React Form， 若采用單向數據流

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狀態變化 => 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 輸入發生改變時，LoginForm中的email與password狀態動態產生改變

雙向數據流

import * as React from 'react';
// Useremail/Userpassword組件狀態變化 => 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狀態變化 => 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 };

實際執行這兩個程序，得到的結果是一致，看起來兩者沒有什么區別

那為何不選擇雙向數據流

  • 代碼維護

以上代碼可以發現，一旦LoginForm發生問題，雙向數據流需要在多個子組件和父組件中同時尋找狀態異常的原因，當程序逐漸趨于復雜化，后期維護會變得異常困難

  • 組件復用

每次用戶狀態需求發生新的變化，每個子組件都要相應調整，造成組件在實際使用中難以復用

  • 應用升級

另外，當程序需要做整體升級，因為狀態分散在各個組件，將會導致難以實行

小結

組件設計成響應式，從長遠看，更符合React推薦的設計模式

原文鏈接：https://juejin.cn/post/7144227935996608549

欄目分類
最近更新