3

有很多关于在 ES6 React 中处理绑定的方法的问题/文章，但大多数似乎都没有解决React 文档中概述的问题（强调我的）：

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

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 装饰器作为一个简单的解决方案：

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

我想不通的是：这个装饰器会和内联绑定方法有同样的缺点吗？即，每个实例的方法是否只绑定一次？

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

4

2 回答 2

1

类实例字段及其关联的初始化程序解决了必须分配与构造函数中的方法同名但语法更简洁的属性的问题。以下示例可以使用 Babel 的类属性 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});
}
于 2016-09-27T19:18:07.457 回答
0

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

于 2016-06-10T18:47:23.760 回答