是否可以为React的类模型打开React.js自动绑定

Question

根据这个博客文章功能，将React.createClass所有方法React.createClass this 并不是在React的类模型中内置的 。

是否可以默认打开它？

我知道可以使用this.someMethod = this.ticksomeMethod.bind(this); 诀窍是手动执行此操作，但是是否可以为所有方法执行此操作 ？ 或者我被迫为所有方法编写bind ？

我现在拥有的代码示例：

import MessageStore from '../stores/MessageStore.js';

export default class Feed extends React.Component {
   constructor() {
      this.state = {messages: MessageStore.getAll()}
      //can I avoid writing this for every single method?
      this._onChange = this._onChange.bind(this); 
   }

   _onChange() {
       this.setState({messages: MessageStore.getAll()});
   };

   // componentDidMount, componentWillUnmount and render methods ommited
}

Answer 1

目前在React中没有要激活的功能。 这根本不是一个选择。

您可以对一个类进行后处理并自动bind每个函数，但这在许多类中可能是不必要的，并且会增加每个调用的开销（因为您的代码可能混合了需要绑定的函数和一些不需要绑定的函数）。

您需要决定自动调整是否值得，或者只是在事件回调的上下文中使用bind语法，这是JavaScript中所需的典型位置，是可以接受的。

Answer 2

使用优雅的@decorator语法有一个新的解决方案。 您必须为Babel启用JavaScript ES2015 stage-0功能，但在此之后它是轻而易举的！ 然后你可以写：

import autobind from 'autobind-decorator'
// (...)
<li onClick={ this.closeFeedback }>Close</li>
// (...)
@autobind
closeFeedback() {
  this.setState( { closed: true } );
}

要使其工作，您需要安装一些构建库。 这是如何做：

npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-plugin-react-transform
npm install --save-dev babel-plugin-transform-decorators-legacy
npm install --save-dev autobind-decorator

或者将它们全部包装在一个命令中：

npm install --save-dev babel-preset-stage-0 babel-plugin-react-transform babel-plugin-transform-decorators-legacy autobind-decorator

之后，根据您指定babel设置的位置更改.babelrc或webpack.config.js ：

query: {
  presets: ['es2015', 'react', 'stage-0'],
  plugins: [['transform-decorators-legacy']]
}

（请注意，在.babelrc文件中，根节点从查询对象开始。）

祝你好运，不要忘记导入声明！

Answer 3

如果您不想或不能使用babel装饰器语法。 您可以定义自动绑定功能并在您的类中添加一行样板来处理自动绑定。

 function autobind(target) { // <-- Define your autobind helper for (let prop of Object.getOwnPropertyNames(Object.getPrototypeOf(target))) { if (typeof target[prop] !== 'function') { continue; } if (~target[prop].toString().replace(/\\s/g, '').search(`^${prop}[(][^)]*[)][{;][\\'\\"]autobind[\\'\\"];`)) { target[prop] = target[prop].bind(target); } } } class Test { constructor() { autobind(this); // <- single line of boilerplate this.message = 'message'; } method1(){ return this.method2(); } method2(){ console.log(this.message);} _handleClick() { 'autobind'; // <-- autobind searches for functions with 'autobind' as their first expression. console.log(this.message); } } let test = new Test(); let _handleClick = test._handleClick; _handleClick();