为什么在使用 ES6 和 ReactJS 时需要使用 bind？

IT技术 javascript reactjs bind
2021-04-02 07:06:15

使用 ReactJS 进行 ES5 开发，一个组件可以表示如下：

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 运算符时引用了实例化对象本身，有人可以告诉我使用 bind 的真正目的是什么？是不是跟React的内部机制有关？

3个回答
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!"

解释：

“this”的值取决于函数的调用方式。当您提供 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 对每个处理程序仅发生一次，而不是在每次渲染时发生。

bindReact ES6 类的目的之一是您必须手动绑定。

无自动绑定

方法遵循与常规 ES6 类相同的语义，这意味着 >它们不会自动将 this 绑定到实例。您必须>明确使用 .bind(this) 或箭头函数 =>：

我们建议您在构造函数中绑定事件处理程序，以便每个实例只绑定一次：

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

bind只是核心javascript。这就是绑定事件的工作原理。这不是 React 的概念。

下面的文章很好地解释了它。

JavaScript 中的有界函数是绑定到给定上下文的函数。这意味着无论您如何调用它，调用的上下文都将保持不变。

为了从常规函数中创建一个有界函数，使用了 bind 方法。bind 方法将要绑定函数的上下文作为第一个参数。其余参数是将始终传递给此类函数的参数。结果它返回一个有界函数。

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

因为当您传递类方法来响应组件或元素时，它们会绑定到这些组件/元素，从而将它们绑定到构造函数中的内部类范围将值绑定this到内部类范围
2021-06-06 07:06:15
其它你可能感兴趣的问题
上一篇在 React js 中检测滚动方向 下一篇Redux 展示组件与容器组件