React組件中的函數綁定this的幾種方式

在React中使用class定義組件時如果不注意this的指向問題，會帶來一些麻煩。

綁定this主要有下面兩種方法：

1. bind()

在class中定義函數，然后在構造方法中使用bind()綁定當前的組件對象。

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;
        this.handleClick = this.handleClick.bind(this) ;
    }
    handleClick() {
        //...
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>點擊</button>
            </div>
        )
    }
}

2. 箭頭函數

箭頭函數中的this指向定義函數定義時所在的執行環境。而不是運行時所在的環境。

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;

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

組件中，哪些函數需要綁定當前組件對象呢，主要有：

1. 事件處理函數

2. 作為自定義屬性傳入子組件的函數

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;

    }

    commentAdd = () => {
        //...
    }
    render() {
        return (
            <div>
                   <CommentList CommentAdd={this.commentAdd} />
            </div>
        )
    }
}

CommentList是一個子組件，從父組件中傳入了一個函數作為這個子組件的自定義屬性。

3. 異步操作的回調函數

class MyComponent extends React.Component {
    constructor(props) {
        super(props) ;
        this.state = {

            title: 'hello world'
        }

    }


    componentDidMount() {
        setTimeout((function() {
            this.setState({
                title: '你好，世界'
            })
        }).bind(this), 1000)
    }

    render() {
        return (
            <div>
                <h1>{this.state.title}</h1>
            </div>
        )
    }
}
ReactDOM.render(<MyComponent/>, document.querySelector('#app'))

setTimeout()的第一個參數是一個回調函數。此時這個回調函數需要綁定當前的組件對象，因為回調函數內需要組件的一些方法和屬性。

總結

凡是組件內自定義的函數，都要綁定組件對象。而且最好使用箭頭函數定義函數。這樣函數內部的this直接指向當前的組件對象。

組件中不能使用立即執行的函數。