[[410315]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

一、受控組件

受控組件，簡單來講，就是受我們控制的組件，組件的狀態(tài)全程響應(yīng)外部數(shù)據(jù)

舉個(gè)簡單的例子：

class TestComponent extends React.Component { 
  constructor (props) { 
    super(props); 
    this.state = { username: 'lindaidai' }; 
  } 
  render () { 
    return <input name="username" value={this.state.username} /> 
  } 
} 

這時(shí)候當(dāng)我們在輸入框輸入內(nèi)容的時(shí)候，會(huì)發(fā)現(xiàn)輸入的內(nèi)容并無法顯示出來，也就是input標(biāo)簽是一個(gè)可讀的狀態(tài)

這是因?yàn)関alue被this.state.username所控制住。當(dāng)用戶輸入新的內(nèi)容時(shí)，this.state.username并不會(huì)自動(dòng)更新，這樣的話input內(nèi)的內(nèi)容也就不會(huì)變了

如果想要解除被控制，可以為input標(biāo)簽設(shè)置onChange事件，輸入的時(shí)候觸發(fā)事件函數(shù)，在函數(shù)內(nèi)部實(shí)現(xiàn)state的更新，從而導(dǎo)致input框的內(nèi)容頁發(fā)現(xiàn)改變

因此，受控組件我們一般需要初始狀態(tài)和一個(gè)狀態(tài)更新事件函數(shù)

二、非受控組件

非受控組件，簡單來講，就是不受我們控制的組件

一般情況是在初始化的時(shí)候接受外部數(shù)據(jù)，然后自己在內(nèi)部存儲其自身狀態(tài)

當(dāng)需要時(shí)，可以使用ref 查詢 DOM并查找其當(dāng)前值，如下：

import React, { Component } from 'react'; 
 
export class UnControll extends Component { 
  constructor (props) { 
    super(props); 
    this.inputRef = React.createRef(); 
  } 
  handleSubmit = (e) => { 
    console.log('我們可以獲得input內(nèi)的值為', this.inputRef.current.value); 
    e.preventDefault(); 
  } 
  render () { 
    return ( 
      <form onSubmit={e => this.handleSubmit(e)}> 
        <input defaultValue="lindaidai" ref={this.inputRef} /> 
        <input type="submit" value="提交" /> 
      </form> 
    ) 
  } 
} 

關(guān)于refs的詳情使用可以參考之前文章

三、應(yīng)用場景

大部分時(shí)候推薦使用受控組件來實(shí)現(xiàn)表單，因?yàn)樵谑芸亟M件中，表單數(shù)據(jù)由React組件負(fù)責(zé)處理

如果選擇非受控組件的話，控制能力較弱，表單數(shù)據(jù)就由DOM本身處理，但更加方便快捷，代碼量少

針對兩者的區(qū)別，其應(yīng)用場景如下圖所示：

參考文獻(xiàn)

• http://meloguo.com/2018/10/08/受控與非受控組件/
• https://zhuanlan.zhihu.com/p/37579677