免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

this怎么在React組件中使用

今天就跟大家聊聊有關(guān)this怎么在React組件中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的當(dāng)陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

React組件的this是什么

通過編寫一個簡單組件，并渲染出來，分別打印出自定義函數(shù)和render中的this：

import React from 'react';

const STR = '被調(diào)用，this指向：';

class App extends React.Component{
  constructor(){
    super()
  }

  //測試函數(shù)
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){

    console.log(`render ${STR}`,this);
    return(
      <div>
        <h2>hello World</h2>
        <label htmlFor = 'btn'>單擊打印函數(shù)handler中this的指向</label>
        <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

結(jié)果如圖：

this怎么在React組件中使用

可以看到，render函數(shù)中的this指向了組件實例，而handler（）函數(shù)中的this則為undefined，這是為何？

JavaScript函數(shù)中的this

我們都知道JavaScript函數(shù)中的this不是在函數(shù)聲明的時候定義的，而是在函數(shù)調(diào)用（即運(yùn)行）的時候定義的

var student = {
  func: function() {
    console.log(this);
  };
};

student.func();
var studentFunc = student.func;
studentFunc();

這段代碼運(yùn)行，可以看到student.func()打印了student對象，因為此時this指向student對象；而studentFunc()打印了window，因為此時由window調(diào)用的，this指向window。

這段代碼形象的驗證了，JavaScript函數(shù)中的this不是在函數(shù)聲明的時候，而是在函數(shù)運(yùn)行的時候定義的；

同樣，React組件也遵循JavaScript的這種特性，所以組件方法的‘調(diào)用者'不同會導(dǎo)致this的不同（這里的 “調(diào)用者” 指的是函數(shù)執(zhí)行時的當(dāng)前對象）

“調(diào)用者”不同導(dǎo)致this不同

測試：分別在組件自帶的生命周期函數(shù)以及自定義函數(shù)中打印this，并在render（）方法中分別使用this.handler(),window.handler(),onCilck={this.handler}這三種方法調(diào)用handler（）：

/App.jsx
 //測試函數(shù)
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);

    this.handler();
    window.handler = this.handler;
    window.handler();

    return(

      <div>
        <h2>hello World</h2>
        <label htmlFor = 'btn'>單擊打印函數(shù)handler中this的指向</label>
        <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

this怎么在React組件中使用

可以看到：

  1. render中this -> 組件實例App對象；

  2. render中this.handler() -> 組件實例App對象 ;

  3. render中window.handler() -> window對象；

  4. onClick ={this.handler} -> undefined

繼續(xù)使用事件觸發(fā)組件的裝載、更新和卸載過程：

/index.js
import React from 'react'
import {render,unmountComponentAtNode} from 'react-dom'

import App from './App.jsx'


const root=document.getElementById('root')

console.log("首次掛載");
let instance = render(<App />,root);

window.renderComponent = () => {
  console.log("掛載");
  instance = render(<App />,root);
}

window.setState = () => {
  console.log("更新");
  instance.setState({foo: 'bar'});
}


window.unmountComponentAtNode = () => {
  console.log('卸載');
  unmountComponentAtNode(root);
}

使用三個按鈕觸發(fā)組件的裝載、更新和卸載過程：

/index.html
<!DOCTYPE html>
<html>
<head>
  <title>react-this</title>
</head>
<body>
  <button onclick="window.renderComponent()">掛載</button>
  <button onclick="window.setState()">更新</button>
  <button onclick="window.unmountComponentAtNode()">卸載</button>
  <div id="root">
    <!-- app -->
  </div>
</body>
</html>

運(yùn)行程序，依次單擊“掛載”，綁定onClick={this.handler}“單擊”按鈕，“更新”和“卸載”按鈕結(jié)果如下：

this怎么在React組件中使用

1. render()以及componentDIdMount()、componentDIdUpdate()等其他生命周期函數(shù)中的this都是組件實例；

2. this.handler()的調(diào)用者，為render（）中的this，所以打印組件實例；

3. window.handler()的“調(diào)用者”，為window，所以打印window；

4. onClick={this.handler}的“調(diào)用者”為事件綁定，來源多樣，這里打印undefined。

-面對如此混亂的場景，如果我們想在onClick中調(diào)用自定義的組件方法，并在該方法中獲取組將實例，我們就得進(jìn)行轉(zhuǎn)換上下文即綁定上下文：

自動綁定和手動綁定

  1. React.createClass有一個內(nèi)置的魔法，可以自動綁定所用的方法，使得其this指向組件的實例化對象，但是其他JavaScript類并沒有這種特性；

  2. 所以React團(tuán)隊決定不再React組件類中實現(xiàn)自動綁定，把上下文轉(zhuǎn)換的自由權(quán)交給開發(fā)者；

  3. 所以我們通常在構(gòu)造函數(shù)中綁定方法的this指向：

import React from 'react';
const STR = '被調(diào)用，this指向：';
class App extends React.Component{
  constructor(){
    super();
    this.handler = this.handler.bind(this);
  }
//測試函數(shù)
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);
    this.handler();
    window.handler = this.handler;
    window.handler();

    return(
      <div>
        <h2>hello World</h2>
        <label htmlFor = 'btn'>單擊打印函數(shù)handler中this的指向</label>
        <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/>
      </div>    
    )
  }
}
export default App

將this.handler()綁定為組件實例后，this.handler()中的this就指向組將實例，即onClick={this.handler}打印出來的為組件實例；

看完上述內(nèi)容，你們對this怎么在React組件中使用有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前文章：this怎么在React組件中使用
標(biāo)題URL：http://m.newbst.com/article36/jesisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、企業(yè)建站、網(wǎng)站排名、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司