React中DOM事件和狀態(tài)怎么綁定

本文小編為大家詳細(xì)介紹“React中DOM事件和狀態(tài)怎么綁定”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React中DOM事件和狀態(tài)怎么綁定”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

DOM事件

react中綁定事件的語法跟html中為元素綁定事件的語法相似，

html中綁定事件：

<div onclick="fn"></div>
    react中綁定事件
<div onClick={this.fn}></div>

注意：

• 1 事件名稱首字母必須大寫

• 2 事件回調(diào)函數(shù)定義在組件中，我們通過插值語法引入綁定

• 3 事件回調(diào)函數(shù)不能執(zhí)行（后面不能添加參數(shù)集合()）

綁定的是一個(gè)未執(zhí)行的方法

參數(shù)

React使用了事件委托模式實(shí)現(xiàn)事件的綁定（事件委托模式特點(diǎn)：1 減少事件數(shù)量， 2 預(yù)言未來元素， 3 防止內(nèi)存外泄）

vue沒有實(shí)現(xiàn)事件委托，參數(shù)就是源生的事件對(duì)象

jquery實(shí)現(xiàn)了事件委托模式，參數(shù)是jquery封裝后的事件對(duì)象

react中的DOM事件是基于事件委托模式實(shí)現(xiàn)的，因此參數(shù)就是react封裝的事件對(duì)象（16版本就一個(gè)參數(shù)）

因此可以通過事件對(duì)象準(zhǔn)確的獲取綁定事件的元素，以及觸發(fā)事件的元素。

作用域

react中的DOM事件回調(diào)函數(shù)

ES5開發(fā)中，this指向組件實(shí)例化對(duì)象，并且是不能改變的

ES6開發(fā)中，this默認(rèn)是undefined，我們未來訪問組件中的其他數(shù)據(jù)，我們要綁定作用域

改變作用域由兩種方式：

• 第一種，使用ES5提供的bind方法，改變作用域

• 第二種，使用ES6提供的箭頭函數(shù)，是定義時(shí)的作用域

一旦改變了作用域，我們是可以傳遞自定義參數(shù)的

bind方式改變的作用域，傳遞的自定義參數(shù)始終在事件對(duì)象前面

箭頭函數(shù)改變的作用域，傳遞的自定義參數(shù)可以在任何位置。

在ES6開發(fā)中，事件回調(diào)函數(shù)允許我們綁定其他的對(duì)象，但是工作中，不建議綁定組件之外的其他對(duì)象

舉例：

// 定義類
 class Demo extends Component {
  // 事件回調(diào)函數(shù)
  clickBtn(e) {
      console.log(this, arguments)
      // console.log(e.target, e.currentTarget)
  }
  // 渲染
  render() {
      return (
          <div>
              <button onClick={this.clickBtn}><span>按鈕</span>1</button>
              {/*更改this*/}
              <button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按鈕2</button>
              <button onClick={e => this.clickBtn(100, e, 'demo', false)}>按鈕3</button>
              {/*工作中，不建議綁定組件之外的其他對(duì)象*/}
              <button onClick={this.clickBtn.bind(obj)}>按鈕4</button>
          </div>
      )
  }
}

狀態(tài)

組件有兩類數(shù)據(jù)，一類是屬性數(shù)據(jù)，一類就是狀態(tài)數(shù)據(jù)

屬性數(shù)據(jù)是在組件外部傳遞給組件的，因此在組件外部維護(hù)

狀態(tài)數(shù)據(jù)是在組件內(nèi)部使用的，因此在組件內(nèi)部維護(hù)

根據(jù)組件是否有狀態(tài)數(shù)據(jù)，可以將組件分成兩類，一類是無狀態(tài)是組件，一類是有狀態(tài)組件

無狀態(tài)組件

如果組件創(chuàng)建完成，組件就是一成不變的，組件不會(huì)產(chǎn)生交互，不會(huì)發(fā)送請(qǐng)求，這類組件就是無狀態(tài)組件

我們目前所學(xué)習(xí)的組件，都是無狀態(tài)組件

無狀態(tài)組件還可以簡(jiǎn)寫成一個(gè)函數(shù)

無狀態(tài)組件也叫state less component

有狀態(tài)組件

如果組件創(chuàng)建完成后，會(huì)與用戶產(chǎn)生交互，會(huì)發(fā)送異步請(qǐng)求等等，在組件內(nèi)部就會(huì)產(chǎn)生數(shù)據(jù)，為了維護(hù)這部分?jǐn)?shù)據(jù)，我們可以將這部分?jǐn)?shù)據(jù)放在狀態(tài)中，這樣的組件就是有狀態(tài)組件。

這里的數(shù)據(jù)就是狀態(tài)數(shù)據(jù)

使用狀態(tài)數(shù)據(jù)

使用狀態(tài)數(shù)據(jù)跟使用屬性數(shù)據(jù)一樣，也是通過this.state來使用。

初始化狀態(tài)數(shù)據(jù)

我們?cè)诮M件的構(gòu)造函數(shù)中，初始化狀態(tài)數(shù)據(jù)。

es6中通過constructor定義構(gòu)造函數(shù)，由于我們的組件繼承了Component組件基類，

并且重寫了構(gòu)造函數(shù)constructor，為了在構(gòu)造函數(shù)內(nèi)實(shí)現(xiàn)構(gòu)造函數(shù)繼承，我們要使用super關(guān)鍵字

構(gòu)造函數(shù)有props屬性數(shù)據(jù)參數(shù)，為了繼承它，我們要將props參數(shù)傳遞給super方法

super(props);

如果不傳遞：在構(gòu)造函數(shù)中，this.props目前是undefined

由于繼承了props，所以在構(gòu)造函數(shù)中props和this.props沒有區(qū)別了

初始化狀態(tài)

在構(gòu)造函數(shù)中，通過為this.state賦值即可。

注意：由于在構(gòu)造函數(shù)中，我們可以訪問屬性數(shù)據(jù)，因此我們可以用屬性數(shù)據(jù)為狀態(tài)數(shù)據(jù)賦值，這樣可以實(shí)現(xiàn)數(shù)據(jù)有外部流入內(nèi)部（工作中常見）

修改狀態(tài)數(shù)據(jù)

組件提供了一個(gè)this.setState的方法，可以在組件內(nèi)部修改狀態(tài)數(shù)據(jù)

參數(shù)是對(duì)象

key表示狀態(tài)屬性數(shù)據(jù)名稱

value表示狀態(tài)數(shù)據(jù)值

注意：無論是組件的屬性數(shù)據(jù)發(fā)生改變，還是狀態(tài)數(shù)據(jù)發(fā)生改變，組件都會(huì)執(zhí)行render方法。

// 無狀態(tài)組件內(nèi)部不需要維護(hù)數(shù)據(jù)，因此可以簡(jiǎn)寫成函數(shù)
 let Demo = () => <button>按鈕</button>
 // 定義換一換組件
 class Demo extends Component {
 // 初始化狀態(tài)數(shù)據(jù)
 constructor(props) {
      // 構(gòu)造函數(shù)繼承
      super(props);
      // console.log(this.props, props)
      // 初始化狀態(tài)
      this.state = {
          num: 0
      }
  }
 // 定義子視圖列表
 createChildList(arr) {
      // 將數(shù)組成員轉(zhuǎn)成span
      return arr.map((item, index) => <span key={index}>{item}</span>)
  }
  // 創(chuàng)建新聞列表
  createList() {
      // console.log(this)
      // 獲取數(shù)據(jù)長(zhǎng)度
      let len = this.props.data.length;
      return this.props.data.map((item, index) => {
          // 遍歷第二維數(shù)組,如果num與index相等，要顯示
          return <li key={index} style={{
              display: this.state.num % len === index ? '' : 'none'
          }}>{this.createChildList(item)}</li>
      })
  }
  // 事件回調(diào)函數(shù)
  toggle() {
      // 更新num
      // var num = this.state.num;
      // // 下一頁
      // num++;
      // 更新狀態(tài)
      // this.setState({ num })
      // 簡(jiǎn)化成一步
      this.setState({
          // 先加再更新
          num: ++this.state.num
      })
  }
  // 定義渲染方法
  render() {
      return (
          <div>
              {/*<span onClick={this.toggle.bind(this)}>換一換</span>*/}
              <span onClick={e => this.toggle(e)}>換一換</span>
              {/*新聞列表*/}
              <ul>{this.createList()}</ul>
          </div>
      )
  }
}

讀到這里，這篇“React中DOM事件和狀態(tài)怎么綁定”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。