作者：霜序

校稿：袋鼠云數(shù)棧前端團(tuán)隊(duì)運(yùn)營(yíng)小組

該文章包含如下內(nèi)容

• 受控與非受控組件
  • 非受控組件
  • 受控組件
• 受控和非受控組件邊界
• 反模式
• 解決方案

前言

在 HTML 中摆出，表單元素(<input>/<textarea>/<select>)，通常自己會(huì)維護(hù) state，并根據(jù)用戶的輸入進(jìn)行更新

<form>
  <label>
    名字:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="提交" />
</form>

在這個(gè) HTML 中志衣，我們可以在 input 中隨意的輸入值窿吩，如果我們需要獲取到當(dāng)前 input 所輸入的內(nèi)容或链，應(yīng)該怎么做呢秽誊？

受控與非受控組件

非受控組件(uncontrolled component)

使用非受控組件鲸沮，不是為每個(gè)狀態(tài)更新編寫數(shù)據(jù)處理函數(shù)，而是將表單數(shù)據(jù)交給 DOM 節(jié)點(diǎn)來處理养距，可以使用 Ref 來獲取數(shù)據(jù)
在非受控組件中，希望能夠賦予表單一個(gè)初始值日熬，但是不去控制后續(xù)的更新棍厌。可以采用defaultValue指定一個(gè)默認(rèn)值

class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
    // do something with `name`
  }
  render() {
    return (
      <div>
        <input
                    type="text"
                    defaultValue="Bob"
                    ref={input => this._name = input}
                />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

受控組件(controlled component)

在 React 中竖席，可變狀態(tài)(mutable state)通常保存在組件的 state 屬性中耘纱，并且只能夠通過setState 來更新

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'shuangxu'};
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value}/>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

在上述的代碼中，在 Input 設(shè)置了 value 屬性值毕荐，因此顯示的值始終為this.state.value束析，這使得 state 成為了唯一的數(shù)據(jù)源。

const handleChange = (event) => {
    this.setState({ value: event.target.value })
}

<input type="text" value={this.state.value} onChange={this.handleChange}/>

如果我們?cè)谏厦娴氖纠袑懭?code>handleChange 方法憎亚，那么每次按鍵都會(huì)執(zhí)行該方法并且更新 React 的 state,因此表單的值將隨著用戶的輸入而改變

React 組件控制著用戶輸入過程中表單發(fā)生的操作并且 state 還是唯一數(shù)據(jù)源员寇，被 React 以這種方式控制取值的表單輸入元素叫做受控組件

受控和非受控組件邊界

非受控組件

Input 組件只接收一個(gè)defaultValue默認(rèn)值，調(diào)用 Input 組件的時(shí)候第美，只需要通過 props 傳遞一個(gè)defaultValue 即可

//組件
function Input({defaultValue}){
    return <input defaultValue={defaultValue} />  
}

//調(diào)用
function Demo(){
    return <Input defaultValue='shuangxu' />
}

受控組件

數(shù)值的展示和變更需要由state和setState蝶锋，組件內(nèi)部控制 state，并實(shí)現(xiàn)自己的 onChange 方法

//組件
function Input() {
    const [value, setValue] = useState('shuangxu')
  return <input value={value} onChange={e=>setValue(e.target.value)} />;
}

//調(diào)用
function Demo() {
  return <Input />;
}

請(qǐng)問這時(shí) Input 組件是受控還是非受控什往？如果我們采用之前的寫法更改這個(gè)組件以及其調(diào)用

//組件
function Input({defaultValue}) {
    const [value, setValue] = useState(defaultValue)
  return <input value={value} onChange={e=>setValue(e.target.value)} />;
}

//調(diào)用
function Demo() {
  return <Input defaultValue='shuangxu' />;
}

此時(shí)的 Input 組件本身是一個(gè)受控組件扳缕，它是由唯一的 state 數(shù)據(jù)驅(qū)動(dòng)的。但是對(duì)于 Demo 來說别威，我們并沒有 Input 組件的一個(gè)數(shù)據(jù)變更權(quán)利躯舔，那么對(duì)于 Demo 組件來說，Input 組件就是一個(gè)非受控組件省古。(??以非受控組件的方式去調(diào)用受控組件是一種反模式)

如何修改當(dāng)前的 Input 和 Demo 組件代碼粥庄，才能夠使得 Input 組件本身也是一個(gè)受控組件，并且對(duì)于 Demo 組件來說它也是受控的訥豺妓？

function Input({value, onChange}){
    return <input value={value} onChange={onChange}
}

function Demo(){
    const [value, setValue] = useState('shuangxu')
    return <Input value={value} onChange={e => setValue(e.target.value)} />

反模式-以非受控組件的方式去調(diào)用受控組件

雖然受控和非受控通常用來指向表單的 inputs飒赃，也能用來描述數(shù)據(jù)頻繁更新的組件利花。
通過上一節(jié)受控與非受控組件的邊界劃分，我們可以簡(jiǎn)單的分類為：

• 如果使用 props 傳入數(shù)據(jù)载佳，有對(duì)應(yīng)的數(shù)據(jù)處理方法炒事，組件對(duì)于父級(jí)來說認(rèn)為是可控的
• 數(shù)據(jù)只是保存在組件內(nèi)部的 state 中，組件對(duì)于父級(jí)來說是非受控的

??什么是派生 state

簡(jiǎn)單來說蔫慧，如果一個(gè)組件的 state 中的某個(gè)數(shù)據(jù)來自外部挠乳，就將該數(shù)據(jù)稱之為派生狀態(tài)。

大部分使用派生 state 導(dǎo)致的問題姑躲，不外乎兩個(gè)原因：

• 直接復(fù)制 props 到 state
• 如果 props 和 state 不一致就更新 state

直接復(fù)制 prop 到 state

??getDerivedStateFromProps和componentWillReceiveProps的執(zhí)行時(shí)期

• 在父級(jí)重新渲染時(shí)睡扬，不管 props 是否有變化，這兩個(gè)生命周期都會(huì)執(zhí)行
• 所以在兩個(gè)方法里面直接復(fù)制 props 到 state 是不安全的黍析，會(huì)導(dǎo)致 state 沒有正確渲染

class EmailInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: this.props.email   //初始值為props中email
    };
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ email: nextProps.email });   //更新時(shí)卖怜，重新給state賦值
  }
  handleChange = (e) => {
    this.setState({ email: e.target.value });
  };
  render() {
    const { email } = this.state;
    return <input value={email} onChange={this.handleChange} />;
  }
}

點(diǎn)擊查看示例

給 Input 設(shè)置 props 傳來的初始值，在 Input 輸入時(shí)它會(huì)修改 state阐枣。但是如果父組件重新渲染時(shí)马靠，輸入框 Input 的值就會(huì)丟失，變成 props 的默認(rèn)值

即使我們?cè)谥刂们氨容^nextProps.email!==this.state.email仍然會(huì)導(dǎo)致更新

針對(duì)于目前這個(gè)小 demo 來說蔼两，可以使用shouldComponentUpdate來比較 props 中的 email 是否修改再來決定是否需要重新渲染甩鳄。但是對(duì)于實(shí)際應(yīng)用來說，這種處理方式并不可行额划，一個(gè)組件會(huì)接收多個(gè) prop妙啃，任何一個(gè) prop 的改變都會(huì)導(dǎo)致重新渲染和不正確的狀態(tài)重置。加上行內(nèi)函數(shù)和對(duì)象 prop俊戳，創(chuàng)建一個(gè)完全可靠的shouldComponentUpdate會(huì)變得越來越難揖赴。shouldComponentUpdate這個(gè)生命周期更多是用于性能優(yōu)化，而不是處理派生 state抑胎。
截止這里储笑，講清為什么不能直接復(fù)制 prop 到 state。思考另一個(gè)問題圆恤，如果只使用 props 中的 email 屬性更新組件訥突倍？

在 props 變化后修改 state

接著上述示例，只使用props.email來更新組件盆昙，這樣可以防止修改 state 導(dǎo)致的 bug

class EmailInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: this.props.email   //初始值為props中email
    };
  }
  componentWillReceiveProps(nextProps) {
        if(nextProps.email !== this.props.email){
        this.setState({ email: nextProps.email });   //email改變時(shí)羽历，重新給state賦值
        }
  }
    //...
}

通過這個(gè)改造，組件只有在 props.email 改變時(shí)才會(huì)重新給 state 賦值淡喜，那這樣改造會(huì)有問題嗎秕磷？

在下列場(chǎng)景中，對(duì)擁有兩個(gè)相同 email 的賬號(hào)進(jìn)行切換的時(shí)炼团，這個(gè)輸入框不會(huì)重置澎嚣，因?yàn)楦附M件傳來的 prop 值沒有任何變化
點(diǎn)擊查看示例
這個(gè)場(chǎng)景是構(gòu)建出來的疏尿，可能設(shè)計(jì)奇怪，但是這樣子的錯(cuò)誤很常見易桃。對(duì)于這種反模式來說褥琐，有兩種方案可以解決這些問題。關(guān)鍵在于晤郑，任何數(shù)據(jù)敌呈，都要保證只有一個(gè)數(shù)據(jù)來源，而且避免直接復(fù)制它造寝。

解決方案

完全可控的組件

從 EmailInput 組件中刪除 state磕洪，直接使用 props 來獲取值，將受控組件的控制權(quán)交給父組件诫龙。

function EmailInput(props){
    return <input onChange={props.onChange} value={props.email}/>
}

如果想要保存臨時(shí)的值析显，需要父組件手動(dòng)執(zhí)行保存。

有 key 的非受控組件

讓組件存儲(chǔ)臨時(shí)的 email state签赃，email 的初始值仍然是通過 prop 來接受的谷异，但是更改之后的值就和 prop 沒有關(guān)系了

function EmailInput(props){
    const [email, setEmail] = useState(props.email)
    return <input value={email} onChange={(e) => setEmail(e.target.value)}/>
}

在之前的切換賬號(hào)的示例中，為了在不同頁面切換不同的值姊舵，可以使用key這個(gè) React 特殊屬性晰绎。當(dāng) key 變化時(shí)寓落，React 會(huì)創(chuàng)建一個(gè)新的組件而不是簡(jiǎn)單的更新存在的組件(獲取更多)括丁。我們經(jīng)常使用在渲染動(dòng)態(tài)列表時(shí)使用 key 值，這里也可以使用伶选。

<EmailInput
    email={account.email}
    key={account.id}
/>

點(diǎn)擊查看示例

每次 id 改變的時(shí)候史飞，都會(huì)重新創(chuàng)建EmailInput，并將其狀態(tài)重置為最近 email 值仰税。

可選方案

1. 使用 key 屬性來做构资，會(huì)使組件整個(gè)組件的 state 都重置≡纱兀可以在getDerivedStateFromProps和componentWillReceiveProps 來觀察 id 的變化吐绵，麻煩但是可行
   點(diǎn)擊查看示例

class EmailInput extends Component {
  state = {
    email: this.props.email,
    prevId: this.props.id
  };

  componentWillReceiveProps(nextProps) {
    const { prevId } = this.state;
    if (nextProps.id !== prevId) {
      this.setState({
        email: nextProps.email,
        prevId: nextProps.id
      });
    }
  }
  // ...
}

2. 使用實(shí)例方法重置非受控組件
   剛剛兩種方式，均是再有唯一標(biāo)識(shí)值的情況下河绽。如果在沒有合適的key值時(shí)己单，也想要重新創(chuàng)建組件。第一種方案就是生成隨機(jī)值或者遞增的值當(dāng)作key值耙饰，另一種就是使用示例方法強(qiáng)制重置內(nèi)部狀態(tài)
   父組件使用ref調(diào)用這個(gè)方法纹笼，點(diǎn)擊查看示例

class EmailInput extends Component {
  state = {
    email: this.props.email
  };

  resetEmailForNewUser(newEmail) {
    this.setState({ email: newEmail });
  }

  // ...
}

那我們?nèi)绾芜x

在我們的業(yè)務(wù)開發(fā)中，盡量選擇受控組件苟跪，減少使用派生 state廷痘，過量的使用 componentWillReceiveProps 可能導(dǎo)致 props 判斷不夠完善蔓涧，倒是重復(fù)渲染死循環(huán)問題。

在組件庫開發(fā)中笋额，例如 Ant Design元暴，將受控與非受控的調(diào)用方式都開放給用戶，讓用戶自主選擇對(duì)應(yīng)的調(diào)用方式鳞陨。比如 Form 組件昨寞，我們常使用 getFieldDecorator 和 initialValue 來定義表單項(xiàng)，但是我們根本不關(guān)心中間的輸入過程厦滤，在最后提交的時(shí)候通過 getFieldsValue 或者 validateFields 拿到所有的表單值援岩，這就是非受控的調(diào)用方式√偷迹或者是享怀，我們?cè)谥挥幸粋€(gè) Input 的時(shí)候，我們可以直接綁定 value 和 onChange 事件趟咆，這也就是受控的方式調(diào)用添瓷。

總結(jié)

在本文中，首先介紹了非受控組件和受控組件的概念值纱。對(duì)于受控組件來說鳞贷，組件控制用戶輸入的過程以及 state 是受控組件唯一的數(shù)據(jù)來源。

接著介紹了組件的調(diào)用問題虐唠，對(duì)于組件調(diào)用方而言搀愧，組件提供方是否為受控組件。對(duì)于調(diào)用方而言疆偿，組件受控以及非受控的邊界劃分取決于當(dāng)前組件對(duì)于子組件值的變更是否擁有控制權(quán)咱筛。

接著介紹了以非受控組件的方式調(diào)用受控組件這種反模式用法，以及相關(guān)示例杆故。不要直接復(fù)制 props 到 state迅箩，而是使用受控組件。對(duì)于不受控的組件处铛，當(dāng)你想在 prop 變化時(shí)重置 state 的話饲趋，可以選擇以下幾種方式：

• 建議: 使用key屬性，重置內(nèi)部所有的初始 state
• 選項(xiàng)一：僅更改某些字段撤蟆，觀察特殊屬性的變化(具有唯一性的屬性)
• 選項(xiàng)二：使用 ref 調(diào)用實(shí)例方法

最后總結(jié)了一下奕塑，應(yīng)當(dāng)如何選擇受控組件還是非受控組件。

參考鏈接

• React 官網(wǎng)——受控組件
• React 官網(wǎng)——非受控組件
• controlled vs. uncontrolled form inputs
• Transitioning from uncontrolled inputs to controlled
• 重新認(rèn)識(shí)受控非受控組件
• 你可能不需要使用派生 state