为什么React会警告我不要将组件方法绑定到对象？

11 浏览
0 Comments

为什么React会警告我不要将组件方法绑定到对象？

我有这个组件。我想要将一个调用处理程序传递给我创建的每个listElement。如果我像下面这样使用bind(this)，它可以正常工作。问题是我在控制台中收到了React的警告：bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.\n

var MyList = React.createClass({
  render: function () {
    var listElements = this.props.myListValues.map(function (val) {
      return (
        
        );
    }.bind(this));
    return (
      
    
          {listElements}
      

      );
  }
});

\n如果我不绑定它，我的子组件将不知道调用处理程序。我应该怎么做才能做得不同呢？\n附言：\n我知道关于解构赋值的用法，例如在http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx中解释的，但我不想使用Harmony。

0

2 答案

0 Comments

React在v0.4版本中引入了自动绑定的功能，这意味着在组件中定义的方法会自动绑定到组件实例上。这样做的好处是可以直接在方法中使用“this”关键字来引用组件实例，而无需手动绑定。

然而，在更新的文档示例中，我们可以看到在按钮的onClick事件处理函数中使用了this.onClick来引用组件的方法。根据自动绑定的规则，这样的写法是可以工作的，因为onClick处理函数会自动绑定到组件实例上。

然而，React在这种情况下会发出警告，告诉我们不要在组件方法中使用this.onClick这样的写法。这是因为在将方法传递给onClick事件处理函数时，React会自动为该方法创建一个新的函数，并将其绑定到组件实例上。这样做的目的是为了避免在每次渲染组件时都创建一个新的函数，以提高性能。

为了解决这个问题，我们可以通过手动将方法绑定到组件实例上来避免警告。一种常见的做法是在组件的constructor方法中使用bind方法来绑定方法，如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick(event) {/* do something with this */}
  
  render() {
    return <button onClick={this.onClick} />;
  }
}

通过手动绑定方法，我们可以确保方法始终在组件实例上执行，而不会创建新的函数。这样可以避免React的警告，并提高性能。

总结起来，React警告我们不要在组件方法中使用this.onClick这样的写法，因为它会导致在每次渲染组件时都创建一个新的函数。为了解决这个问题，我们可以手动将方法绑定到组件实例上。这样可以避免警告，并提高性能。

0
0 Comments

在React中，当我们将组件方法绑定到对象时，会收到一个警告。这个问题的原因是代码中的其他地方。当我们执行`this.someFunction.bind(something)`时，如果`something`不是`null`，就会收到这个错误。

为了找到有问题的代码行，我们可以在代码中搜索`.bind(this`。

值得注意的是，在React 13.1版本中，第二种情况`.bind(this, foo)`不再发出警告，但是`.bind(this)`会发出警告。你可以在这个链接中测试并查看文档中的示例。

为什么`.bind(null,`可以正常工作呢？这是因为自从React v0.4版本开始，React会自动绑定组件的方法。所以当我们执行`.bind(null`时，实际上是执行了`this.method.bind(this).bind(null, arg1, arg2)`。

希望以上内容能帮助到你了解为什么React会对将组件方法绑定到对象发出警告以及如何解决这个问题。

0