三、React組件中的this

時間 2019-11-07

標籤 react 組件欄目 React 简体版

原文原文鏈接

React組件的this是什麼

經過編寫一個簡單組件，並渲染出來，分別打印出自定義函數和render中的this：

import React from 'react';

const STR = '被調用，this指向：';

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

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

    render(){

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

結果如圖：
html

能夠看到，render函數中的this指向了組件實例，而handler（）函數中的this則爲undefined，這是爲什麼？

JavaScript函數中的this

咱們都知道JavaScript函數中的this不是在函數聲明的時候定義的，而是在函數調用（即運行）的時候定義的

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

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

這段代碼運行，能夠看到student.func()打印了student對象，由於此時this指向student對象；而studentFunc()打印了window，由於此時由window調用的，this指向window。react

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

一樣，React組件也遵循JavaScript的這種特性，因此組件方法的‘調用者’不一樣會致使this的不一樣（這裏的「調用者」指的是函數執行時的當前對象）dom

「調用者」不一樣致使this不一樣

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

/App.jsx

import React from 'react';


const STR = '被調用，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);
    }


    //測試函數
    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'>單擊打印函數handler中this的指向</label>
                <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/>
            </div>        
        )
    }
}
export default App

能夠看到：函數
1. render中this -> 組件實例App對象；
2. render中this.handler() -> 組件實例App對象 ;
3. render中window.handler() -> window對象；
4. onClick ={this.handler} -> undefined
繼續使用事件觸發組件的裝載、更新和卸載過程：

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

使用三個按鈕觸發組件的裝載、更新和卸載過程：測試

/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>

運行程序，依次單擊「掛載」，綁定onClick={this.handler}「單擊」按鈕，「更新」和「卸載」按鈕結果以下：

1. render()以及componentDIdMount()、componentDIdUpdate()等其餘生命週期函數中的this都是組件實例；
2. this.handler()的調用者，爲render（）中的this，因此打印組件實例；
3. window.handler()的「調用者」，爲window，因此打印window；
4. onClick={this.handler}的「調用者」爲事件綁定，來源多樣，這裏打印undefined。
- 面對如此混亂的場景，若是咱們想在onClick中調用自定義的組件方法，並在該方法中獲取組將實例，咱們就得進行轉換上下文即綁定上下文：

自動綁定和手動綁定

React.createClass有一個內置的魔法，能夠自動綁定所用的方法，使得其this指向組件的實例化對象，可是其餘JavaScript類並無這種特性；
因此React團隊決定再也不React組件類中實現自動綁定，把上下文轉換的自由權交給開發者；
因此咱們一般在構造函數中綁定方法的this指向：

import React from 'react';


const STR = '被調用，this指向：';

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

        this.handler = this.handler.bind(this);
    }
//測試函數
    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'>單擊打印函數handler中this的指向</label>
                <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/>
            </div>        
        )
    }
}
export default App