Question

有很多关于在ES6 React中处理绑定的方法的问题/文章很多，但大多数似乎没有解决React docs中列出的问题（<强烈的>强调我的）：

我们建议您在构造函数中绑定事件处理程序 它们仅针对每个实例绑定一次：
constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}

对于上下文，他们建议不要使用方法的内联绑定，例如：

//using .bind()
<div onClick={this.tick.bind(this)}>

// ES6 anon arrow functions
<div onClick={() => this.tick()}>

// ES.Next :: operator
<div onClick={::this.tick}>

不确定。但是在构造函数中绑定每个方法的推荐解决方案很麻烦，而且有很多方法，所以我在看ES.Next @autobind decorator在课堂上作为一个简单的解决方案：

import { autobind } from 'core-decorators';

@autobind
class Person {
  getPerson() {
    return this;
  }

  getPersonAgain() {
    return this;
  }
}

let person = new Person();
let { getPerson, getPersonAgain } = person;

getPerson() === person;
// true

getPersonAgain() === person;
// true

我无法弄清楚的是：这个装饰器是否具有内联绑定方法的相同缺点？即，每个实例的方法只能绑定一次吗？

如果没有，是否有一个简洁的解决方案可以避免这个陷阱？

Answer 1

Class instance fields及其关联的初始化程序解决了必须分配与构造函数内部方法同名但具有更简洁语法的属性的问题。使用Babel的class properties transform：

可以使用以下示例

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick = () => {
    this.setState({count: this.state.count + 1});
  };
  ...
 }

这为每个tick实例创建一个新的绑定Counter属性。这会创建与React.createClass相同的数量的绑定函数。

没有实例字段和初始值设定项，效果是相同的（为每个tick实例创建了绑定的Counter属性）但语法更详细：

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}
tick() {
  this.setState({count: this.state.count + 1});
}

Answer 2

我写了一个小组件，它绑定了其他组件的所有方法。你可以尝试一下：http://www.marouen-mhiri.com/react/autobinding-es6-classes-in-react-another-approach/

ES6 React：对于每个实例，ES.Next的@autobind只绑定方法一次吗？

2 个答案: