[[410315]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

一、受控組件

受控組件，簡單來講，就是受我們控制的組件，組件的狀態全程響應外部數據

舉個簡單的例子：

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

這時候當我們在輸入框輸入內容的時候，會發現輸入的內容并無法顯示出來，也就是input標簽是一個可讀的狀態

這是因為value被this.state.username所控制住。當用戶輸入新的內容時，this.state.username并不會自動更新，這樣的話input內的內容也就不會變了

如果想要解除被控制，可以為input標簽設置onChange事件，輸入的時候觸發事件函數，在函數內部實現state的更新，從而導致input框的內容頁發現改變

因此，受控組件我們一般需要初始狀態和一個狀態更新事件函數

二、非受控組件

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

一般情況是在初始化的時候接受外部數據，然后自己在內部存儲其自身狀態

當需要時，可以使用ref 查詢 DOM并查找其當前值，如下：

import React, { Component } from 'react'; 
 
export class UnControll extends Component { 
  constructor (props) { 
    super(props); 
    this.inputRef = React.createRef(); 
  } 
  handleSubmit = (e) => { 
    console.log('我們可以獲得input內的值為', 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> 
    ) 
  } 
} 

關于refs的詳情使用可以參考之前文章

三、應用場景

大部分時候推薦使用受控組件來實現表單，因為在受控組件中，表單數據由React組件負責處理

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

針對兩者的區別，其應用場景如下圖所示：

參考文獻

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