React綁定this的三種方式

時間 2019-12-07

標籤 react 綁定三種方式欄目 React 简体版

原文原文鏈接

React能夠使用React.createClass、ES6 classes、純函數3種方式構建組件。使用React.createClass會自動綁定每一個方法的this到當前組件，但使用ES6 classes或純函數時，就要靠手動綁定this了。接下來介紹React中三種綁定this的方法react

bind()

Function.prototype.bind(thisArg [, arg1 [, arg2, …]])是ES5新增的函數擴展方法，bind()返回一個新的函數對象，該函數的this被綁定到thisArg上，並向事件處理器中傳入參數函數

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (name, e) {
        console.log(this.state.message + name)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick.bind(this, '趙四') }>Say Hello</button>
            </div>
        )
    }
}

要注意的是，跟在this（或其餘對象）後面的參數，以後它們會被插入到目標函數的參數列表的開始位置，傳遞給綁定函數的參數會跟在它們的後面。this

構造函數內綁定

在構造函數constructor內綁定this，好處是僅須要綁定一次，避免每次渲染時都要從新綁定，函數在別處複用時也無需再次綁定prototype

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

箭頭函數

箭頭函數則會捕獲其所在上下文的this值，做爲本身的this值，使用箭頭函數就不用擔憂函數內的this不是指向組件內部了。能夠按下面這種方式使用箭頭函數：code

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
            </div>
        )
    }
}

這種方式有個小問題，由於箭頭函數老是匿名的，若是你打算移除監聽事件，能夠改用如下方式：對象

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick = (e) => {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

不過，在Classes中直接賦值是ES7的寫法，ES6並不支持，只用ES6的話能夠用下面寫法：blog

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = (e) => {
            console.log(this.state.message)
        }
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

三種方法都能實現this的綁定，至於用哪一種方式還跟着本身的習慣來。事件

》》更多幹貨》》ip