快捷導(dǎo)航

React組件中的this的具體使用

更新時(shí)間：2018年02月28日 11:42:31 作者：keywords

這篇文章主要介紹了React組件中的this的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

React組件的this是什么

通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單組件，并渲染出來(lái)，分別打印出自定義函數(shù)和render中的this：

import React from 'react';

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

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

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

  render(){

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

結(jié)果如圖：

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

JavaScript函數(shù)中的this

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

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

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

這段代碼運(yùn)行，可以看到student.func()打印了student對(duì)象，因?yàn)榇藭r(shí)this指向student對(duì)象；而studentFunc()打印了window，因?yàn)榇藭r(shí)由window調(diào)用的，this指向window。

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

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

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

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

/App.jsx

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

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

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

    return(

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

可以看到：

render中this -> 組件實(shí)例App對(duì)象；
render中this.handler() -> 組件實(shí)例App對(duì)象 ;
render中window.handler() -> window對(duì)象；
onClick ={this.handler} -> undefined

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

/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);
}

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

/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é)果如下：

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

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

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

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

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

自動(dòng)綁定和手動(dòng)綁定

React.createClass有一個(gè)內(nèi)置的魔法，可以自動(dòng)綁定所用的方法，使得其this指向組件的實(shí)例化對(duì)象，但是其他JavaScript類(lèi)并沒(méi)有這種特性；
所以React團(tuán)隊(duì)決定不再React組件類(lèi)中實(shí)現(xiàn)自動(dòng)綁定，把上下文轉(zhuǎn)換的自由權(quán)交給開(kāi)發(fā)者；
所以我們通常在構(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);
  }
//測(cè)試函數(shù)
  handler() {
    console.log(`handler ${STR}`,this);
  }

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

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

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

總結(jié)：

React組件生命周期函數(shù)中的this指向組件實(shí)例；

自定義組件方法的this會(huì)因調(diào)用者不同而不同；

為了在組件的自定義方法中獲取組件實(shí)例，需要手動(dòng)綁定this到組將實(shí)例。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: