爲什麼在使用ES6和ReactJS時需要使用綁定？

使用ES5發展與ReactJS，組件可以表述爲如下：爲什麼在使用ES6和ReactJS時需要使用綁定？

var MyComponent = React.createClass({ 
    alertSomething: function(event) { 
    alert(event.target); 
    }, 

    render: function() { 
    return (
     <button onClick={this.alertSomething}>Click Me!</button> 
    ); 
    } 
}); 

ReactDOM.render(<MyComponent />);

在這個例子中，this引用對象本身，這是預期的自然行爲。

問題

我的問題是：

你如何使用ES6創建組件？

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

    alertSomething(event) { 
    alert(event.target); 
    } 

    render() { 
    return (
     <button onClick={this.alertSomething.bind(this)}>Click Me!</button> 
    ); 
    } 
} 

ReactDOM.render(<MyComponent />);

知道，在JavaScript中this引用實例化對象本身使用new運算符的時候，有人能告訴我什麼是使用綁定的真正目的是什麼？這與React的內部機制有關？

來源

2016-07-27 Francisco Maria Calisto

「綁定」只是核心的JavaScript。這是事件綁定的工作原理。這不是一個React概念。 – jzm

「*這是預期的自然行爲*」 - 不。這是'React.createClass'魔術 - ES6的行爲是自然的。 – Bergi

bind只是核心的JavaScript。這是綁定事件的工作原理。這不是一個React概念。

下面的文章解釋得很好。

JavaScript中的有界函數是一個受限於給定上下文的函數。這意味着無論您如何稱呼它，通話的上下文都會保持不變。

要使用常規函數創建有界函數，請使用綁定方法。綁定方法需要將您的函數綁定到的上下文作爲第一個參數。剩下的參數是總是傳遞給這個函數的參數。結果返回一個有界函數。

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

此外，在一個側面說明，你應該做的所有事件在構造函數的結合，而不是在渲染方法。這將防止多個綁定調用。

這是另一個關於這個問題的好消息。他們說：

我們建議您綁定你的事件處理程序的構造函數，因此他們只爲每個實例

https://facebook.github.io/react/docs/reusable-components.html

來源

2016-07-27 23:41:09 jzm

的在bind目的一個必然一旦作出反應ES6類是你必須手動綁定。

沒有自動綁定

方法遵循相同的語義規則ES6類，這意味着>它們不會自動綁定到這個實例。你必須>明確使用。綁定（本）或箭頭功能=>：

我們建議您綁定你的事件處理程序的構造函數，因此它們>只爲每個實例綁定一次：

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
    this.tick = this.tick.bind(this); // manually binding in constructor 
}

你可以閱讀更多文檔：https://facebook.github.io/react/docs/reusable-components.html

來源

2016-07-27 23:47:36 Alejandro

var cat = { 
    sound: 'Meow!', 
    speak: function() { console.log(this.sound); } 
}; 

cat.speak(); // Output: "Meow!" 

var dog = { 
    sound: 'Woof!' 
}; 
dog.speak = cat.speak; 

dog.speak(); // Output: "Woof!" 

var speak = cat.speak; 
speak(); // Output: "undefined" 

speak = cat.speak.bind(dog); 
speak(); // Output: "Woof!"

說明：

的價值「這一」取決於如何函數的n正在被調用。當你提供this.alertSomething作爲你的按鈕的onClick處理函數時，它會改變它的調用方式，因爲你提供了對這個函數的直接引用，並且它不會被你的對象實例調用（不知道我是否是那種措辭對）。

.bind函數將返回一個新的函數，其中「this」永久設置爲傳遞給它的值。

ECMAScript 5引入了Function.prototype.bind。調用f.bind（someObject）會創建一個與f具有相同主體和範圍的新函數，但在原始函數中發生這種情況的位置，在新函數中它將永久地綁定到bind的第一個參數，無論函數如何正在使用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

這是最好做這在組件的構造函數，以便.bind爲每個處理器的發生只有一次，而不是每一個渲染。

來源

2016-07-28 02:08:24 Danny

爲什麼在使用ES6和ReactJS時需要使用綁定？

回答

相關問題