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

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

React組件的this是什么

通過(guò)編寫一個(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(
      

        
hello World
        單擊打印函數(shù)handler中this的指向
        
      
    
    )
  }
}
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(

      

        
hello World
        單擊打印函數(shù)handler中this的指向
        
      
    
    )
  }
}
export default App

可以看到：

1. render中this -> 組件實(shí)例App對(duì)象；

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

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

4. 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(,root);

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

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


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

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

/index.html

  


  掛載
  更新
  卸載