React（ES6類）中綁定上下文的哪種方法更好

React ES6類中沒有自動綁定。因此，開發商有兩種選擇焉能結合上下文：React（ES6類）中綁定上下文的哪種方法更好

1）在構造函數中

export class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.myFunction = this.myFunction.bind(this); 
    } 
    myFunction() { 
    // do something 
    } 
    render() { 
    return (
     <div onClick={this.myFunction}></div> 
    ); 
    } 
}

2）聯方法

export class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    myFunction() { 
    // do something 
    } 
    render() { 
    return (
     <div onClick={this.myFunction.bind(this)}></div> 
    ); 
    } 
}

哪種方法更高效地工作？

來源

2016-07-08 yevgeniy

這是更多的風格偏好，大多數人使用第一種方法，因爲它清理了代碼 –

同意@TylerIguchi ...我更喜歡第一個更清潔的外觀，但都不是更高效「 – erichardson30

如果你有多個監聽器綁定一個函數，直接在元素上使用'.bind（this）'可能會變得單調乏味並且難以管理，在這一點上最好在構造函數中進行綁定。我認爲更好的做法是允許在構造函數中綁定並按照標準進行綁定。 –

我推薦使用箭頭功能。

export class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    myFunction = (e) => { 
    // e.preventDefault() 
    // do something 
    } 
    render() { 
    return (
     <div onClick={e => this.myFunction(e)}></div> 
    ); 
    } 
}

bind()不再需要了。

來源

2016-07-08 17:20:14

與此相關的問題是每次組件重新呈現時都會創建一個新函數。在構造函數中綁定會更好。 –

你說得對，這個問題太嚴重了，我們不能忽視它嗎？無論如何，如你所說，我們應該小心表現。 –

對於處理程序函數，當它們作爲普通函數調用時，它指的是全局對象。當使用ECMAScript 6類而不是React.createClass()時，會發生這種情況，後者具有自動綁定功能。兩種方法可以按預期實現綁定的效果。第一種方式，使用如下語法來顯式綁定處理函數。

constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
} 
handleChange() {}

另一種方法是以這種方式編寫組件的處理程序屬性，而不用綁定任何東西。

<MyComponent onChange={() => this.handleChange()}><MyComponent />

在這種方式中，處理器將只在觸發相應的事件調用，在這個時候，this指的是組件實例，這是我們希望它來指代。

這兩種方法都可以工作，決定使用哪一種是您的電話。

來源

2017-03-16 03:29:13

React（ES6類）中綁定上下文的哪種方法更好

回答

相關問題