React.js ES6避免将'this'绑定到每个方法

最近，我开始修补React.js，我喜欢它。我开始使用常规的ES5，以便掌握所有内容，所有文档均使用ES5编写...

但是现在我想尝试一下ES6，因为它有光泽而且是新的，而且似乎确实简化了一些事情。让我感到困扰的是，对于我添加到组件类中的每个方法，现在都必须将“ this”绑定到该方法，否则它将无法正常工作。所以我的构造函数最终看起来像这样：

constructor(props) {
  super(props);
  this.state = { ...some initial state... }

  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
}

如果我要在类中添加更多方法，这将变得更大，更难看。

我的问题是，是否有某种方法可以解决此问题，或者至少使其更容易，更短且更不丑陋？我想在React中使用ES6的主要原因之一是使我的代码更简洁，但这却相反。任何建议或意见将不胜感激。

您可以使用类字段在构造函数外部进行绑定。它们如下所示：

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

Babel通过其类属性转换实验性地支持了类字段，但是它们仍然是“实验性的”，因为它们是Stage 3 Draft（尚未在Babel预设中）。

您将需要手动进行绑定，直到ES7或启用Babel中的功能为止。Babel在React on ES6 +上的博客文章对此主题进行了简要介绍。

另一种选择是使用装饰器。您在原型上声明了一个吸气剂，并在实例的首次访问中定义了带有该函数绑定版本的自己的属性。

但是有一个陷阱！在开发中，它不会替换该属性，它将在每次访问时绑定。这意味着您不会破坏react-hot-loader。至少对我来说，这很重要。

我创建了一个库class-bind来提供此功能。

import {bound} from 'class-bind';

class App {
  constructor(){
    this.foo = 'bar';
  }

  @bound
  returnsFoo(){
    return this.foo;
  }

  render(){
    var returnsFoo = this.returnsFoo;
    return (
      <div>
        {returnsFoo()} === 'bar'
      </div>
    );
  }
}

装饰器对您来说太不稳定了吗？您可以将所有东西或某些东西绑定在一起，获得相同的好处。

import {bind, bindAll} from 'class-bind';

bind(App.prototype, 'returnsFoo');

// or
bindAll(App.prototype);

Ssorallen的建议很好，但是如果您想要另一种方法，则可以：

    class AppCtrlRender extends Component {
        binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

        render() {
            var isMobile = this.state.appData.isMobile;
            var messages = this.state.appData.messages;
            return (
                <div id='AppCtrlSty' style={AppCtrlSty}>
                    React 1.3 Slider
                    <br/><br/>
                    <div className='FlexBoxWrap'>
                        <Slider isMobile={isMobile}/>
                        <JList data={messages}/>
                    </div>
                </div>
            );
        }
    }

    var getAppState = function() {
        return {
            appData: AppStore.getAppData()
        };
    };

    export default class AppCtrl extends AppCtrlRender {
        constructor() {
            super();
            this.state = getAppState();
            this.binder('appStoreDidChange');
        }

        componentDidMount() {
            var navPlatform = window.navigator.platform;
            Actions.setWindowDefaults(navPlatform);
        }
        componentWillMount() { AppStore.onAny(this.appStoreDidChange); }
        componentWillUnmount() { AppStore.offAny(this.appStoreDidChange); }
        appStoreDidChange() { this.setState(getAppState()); }
    }

您可以向this.binder（'method1'，'method2'，...）添加任意数量的方法

如果使用stage-0，则存在函数绑定语法。

class MyComp extends Component {

  handleClick() { console.log('doing things') }

  render() {
    return <button onClick={::this.handleClick}>Do Things</button>
  }

}

这会破坏为this.handleClick.call(this)，我认为它通常具有足够的性能。

一种避免束缚的想法

class MyComp extends Component {

  render() {
    return <button onClick={e => this.handleClick(e)}>Do Things</button>
  }

}

免责声明：未经测试，也不能轻易处理一个以上的参数（在这种情况下，有一个事件（e）。

另外，根据这篇文章，答案可能是不做某事的一个例子，可能值得一读：

https://daveceddia.com/avoid-bind-when-passing-props/

我实际上更喜欢通过将子级传递给父级上下文来模仿OOP继承。

class Parent extends Component {
  state = {happy: false}

  changeState(happy) {
    this.setState({happy})
  }

  render() {
    return (
      <Child parent={this} >
    )
  }
}

class Child extends Component {
   //...
   this.props.parent.changeState(true)
}

$ 0.02，乔恩

我创建了一种组织所有“绑定”的方法。

class MyClass {
  constructor() {

    this.bindMethods([
      'updateLocationFields',
      'render',
      'loadCities',
    ]);
  }

  bindMethods(methods) {
    methods.forEach((item) => {
      this[item] = this[item].bind(this);
    });
  }

  ...
}

我使用一个辅助函数doBinding(this)，在每个构造函数中都调用它。在此示例中，它绑定_handleChange1()和_handleChange2()。

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        doBinding(this);
        this.state = {value1: "", value2: ""};
    }
    _handleChange1(event) {
        this.setState({value1: event.target.value});
    }
    _handleChange2(event) {
        this.setState({value2: event.target.value});
    }
    render() {
       ...
    }
}

即使您不使用Babel，该方法仍然有效。

我的处理程序方法都以_（表示它们是私有的约定）开头。因此doBinding()寻找_。if (key.startsWith("_"))如果不使用此约定，则可以删除。

function doBinding(obj) {
    const proto = Object.getPrototypeOf(obj);
    for (const key of Object.getOwnPropertyNames(proto)) {
        if (key.startsWith("_")) {
            obj[key] = obj[key].bind(obj);
        }
    }
}

如何使用通用函数执行如下绑定操作：

// common function:
function bind(self,methods){
     for(var key in methods){
       self[key] = methods[key].bind(self);
     }
}

// your class:
class MyClass {
     constructor() {
          bind(this,{
              someHandler1(event){ 
                //... 
              },
              someHandler2(event){ 
                //...
              }
          })
     }
}