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

更新時(shí)間：2022年09月17日 16:25:49 作者：Flag還是要立的

這篇文章主要為大家介紹了React特征Form?單向數(shù)據(jù)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

今天將之前的內(nèi)容做個(gè)系統(tǒng)整理，結(jié)合 React Form 案例，來了解下為何React推薦單向數(shù)據(jù)流，如果采用雙向管理，可能的問題 (關(guān)于React Form案例，可參考相關(guān)文章 - 學(xué)習(xí)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ā)生改變時(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é)果是一致，看起來兩者沒有什么區(qū)別