一、受控組件

在HTML中，表單元素的標(biāo)簽、、等的值改變通常是根據(jù)用戶輸入進(jìn)行更新。

在React中，可變狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能使用 setState() 進(jìn)行更新，而呈現(xiàn)表單的React組件也控制著在后續(xù)用戶輸入時(shí)該表單中發(fā)生的情況，以這種由React控制的輸入表單元素而改變其值的方式，稱為受控組件。

比如，給表單元素input綁定一個(gè)onChange事件，當(dāng)input狀態(tài)發(fā)生變化時(shí)就會(huì)觸發(fā)onChange事件，從而更新組件的state。

import React, { Component } from 'react'
export default class MyInput extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }
  handleChange = (event)=>{
    this.setState({
        value: event.target.value
    })
  }
  render(){
    return(
      <div>
          <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
           />
      </div>
    )
  }
}

受控組件更新state的流程

• 可以通過(guò)初始state中設(shè)置表單的默認(rèn)值
• 每當(dāng)表單的值發(fā)生變化時(shí)，調(diào)用onChange事件處理器
• 事件處理器通過(guò)事件對(duì)象event拿到改變后的狀態(tài)，并更新組件的state
• 一旦通過(guò)setState方法更新state，就會(huì)觸發(fā)視圖的重新渲染，完成表單組件的更新

React中數(shù)據(jù)是單項(xiàng)流動(dòng)的，從示例中，可以看出表單的數(shù)據(jù)來(lái)源于組件的state，并通過(guò)props傳入，這也稱為單向數(shù)據(jù)綁定。然后又通過(guò)onChange事件處理器將新的數(shù)據(jù)寫回到state，完成了雙向數(shù)據(jù)綁定。

二、非受控組件

非受控組件指的是，表單數(shù)據(jù)由DOM本身處理。即不受setState()的控制，與傳統(tǒng)的HTML表單輸入相似，input輸入值即顯示最新值。

在非受控組件中，可以使用一個(gè)ref來(lái)從DOM獲得表單值。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    console.log('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

非受控組件在底層實(shí)現(xiàn)時(shí)是在其內(nèi)部維護(hù)了自己的狀態(tài)state，這樣表現(xiàn)出用戶輸入任何值都能反應(yīng)到元素上。

三、總結(jié)

兩者區(qū)別

1.受控組件

受控組件依賴于狀態(tài)

受控組件的修改會(huì)實(shí)時(shí)映射到狀態(tài)值上，此時(shí)可以對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)

受控組件只有繼承React.Component才會(huì)有狀態(tài)

受控組件必須要在表單上使用onChange事件來(lái)綁定對(duì)應(yīng)的事件

2.非受控組件

非受控組件不受狀態(tài)的控制

非受控組件獲取數(shù)據(jù)就是相當(dāng)于操作DOM

非受控組件可以很容易和第三方組件結(jié)合，更容易同時(shí)集成 React 和非 React 代碼

選擇受控組件還是非受控組件

3.受控組件使用場(chǎng)景：一般用在需要?jiǎng)討B(tài)設(shè)置其初始值的情況。例如：某些form表單信息編輯時(shí)，input表單元素需要初始顯示服務(wù)器返回的某個(gè)值然后進(jìn)行編輯。

4.非受控組件使用場(chǎng)景：一般用于無(wú)任何動(dòng)態(tài)初始值信息的情況。例如：form表單創(chuàng)建信息時(shí)，input表單元素都沒(méi)有初始值，需要用戶輸入的情況。

到此這篇關(guān)于React受控組件與非受控組件實(shí)例分析講解的文章就介紹到這了,更多相關(guān)React受控組件與非受控組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論