摘要：組件的是什么通過編寫一個簡單組件，并渲染出來，分別打印出自定義函數(shù)和中的被調(diào)用，指向測試函數(shù)單擊打印函數(shù)中的指向單擊結(jié)果如圖可以看到，函數(shù)中的指向了組件實(shí)例，而函數(shù)中的則為，這是為何函數(shù)中的我們都知道函數(shù)中的不是在函數(shù)聲明的時候定義的，而是

通過編寫一個簡單組件，并渲染出來，分別打印出自定義函數(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(
            

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

結(jié)果如圖：

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

我們都知道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對象，因?yàn)榇藭rthis指向student對象；而studentFunc()打印了window，因?yàn)榇藭r由window調(diào)用的，this指向window。

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

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

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

/App.jsx

import React from "react";


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

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

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

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

    shouldComponentUpdate() {
        console.log(`shouldComponentUpdate ${STR}`,this);
        return true;
    }

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

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


    //測試函數(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

可以看到：

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

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

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

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

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

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


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

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

/index.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)用者”為事件綁定，來源多樣，這里打印undefined。
- 面對如此混亂的場景，如果我們想在onClick中調(diào)用自定義的組件方法，并在該方法中獲取組將實(shí)例，我們就得進(jìn)行轉(zhuǎn)換上下文即綁定上下文：

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

所以React團(tuán)隊(duì)決定不再React組件類中實(shí)現(xiàn)自動綁定，把上下文轉(zhuǎn)換的自由權(quán)交給開發(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);
    }
//測試函數(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

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

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

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

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