最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

成都創(chuàng)新互聯(lián)專注于包河企業(yè)網站建設,響應式網站建設,商城開發(fā)。包河網站建設公司,為包河等地區(qū)提供建站服務。全流程專業(yè)公司，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

一、受控組件

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

舉個簡單的例子：

 
 
 
 
  
  
  
  
class TestComponent extends React.Component { 
  
  
  
  
  constructor (props) { 
  
  
  
  
    super(props); 
  
  
  
  
    this.state = { username: 'lindaidai' }; 
  
  
  
  
  } 
  
  
  
  
  render () { 
  
  
  
  
    return  
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

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

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

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

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

二、非受控組件

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

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

當需要時，可以使用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 ( 
  
  
  
  
       this.handleSubmit(e)}> 
  
  
  
  
         
  
  
  
  
         
  
  
  
  
       
  
  
  
  
    ) 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

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

三、應用場景

大部分時候推薦使用受控組件來實現(xiàn)表單，因為在受控組件中，表單數(shù)據(jù)由React組件負責處理

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

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

參考文獻

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

分享名稱：說說對React中受控組件和非受控組件的理解？應用場景？
轉載來于：http://m.fisionsoft.com.cn/article/cdjpsdj.html