是否可以为React.js的类模型启用React.js自绑定

Question

根据这篇博客文章特性，将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

在目前的反应中，没有任何功能可以激活这一点。这根本不是一个选择。

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

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

Answer 2

有一种新的解决方案，使用优雅的@装饰符语法。您必须为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();

​