对 react 编写 es6 的 this 和 bind(this) 感到困惑

Question

class UserList extends Component {

    constructor(props) {
        super(props);
        this.something => (
               console.log('something')
            )
    }

    createListItem(){
        return this.props.users.map(user => 
            <li key={user.id}>{user.first} {user.last}</li>)
    }

    render(){
        return(
            <ul>
                {this.createListItem()}
            </ul>
            <button onClick={this.something}>trigger something</button>
        )
    }
}

如果我在构造函数中删除 <button> 和 this.something 函数，代码将起作用。下面的代码有什么问题？实际上我不需要构造函数，但我想研究何时使用bind(this) 以及何时不使用 ES6 编写 React。

Answer 1

您实际上并没有分配一个有效的函数表达式，所以让我们开始吧。

首先，如果您不接受任何参数，箭头函数的正确语法是：

() => { console.log('something'); }

好的，现在已经排序了，你需要使用赋值运算符来实际赋值：

this.something = () => { console.log('something'); }

太好了，现在应该可以让构造函数工作了。让我们看看你在哪里实际使用了这个函数：

<button onClick={this.something}>trigger something</button>

因此，从历史上看，在 ES2015 之前，确实这样的事情意味着回调不会绑定到实例，除非您使用表达式 this.something.bind(this) 或像您尝试做的那样在构造函数中分配它。

但是如果你想使用箭头函数，它们真正方便的是编写匿名函数，所以你实际上可以直接为简单的用例做这样的事情：

<button onClick={() => this.foo()}>trigger something</button>

如果没有，我建议你真的不要在构造函数中使用匿名函数或作为回调的表达式，而是为它编写一个方法并将the new :: bind operator 与 Babel 一起使用，特别是自我自动绑定行为。

然后你会得到这样的结果：

class UserList extends Component {
  createListItem () {
    return this.props.users.map(user => (
      <li key={user.id}>{user.first} {user.last}</li>
    ))
  }

  something () {
    this.setState({foo: 'bar'})
    console.log('something')
  }

  render(){
    return(
      <ul>{this.createListItem()}</ul>
      <button onClick={::this.something}>trigger something</button>
    )
  }
}

这既简洁又可以使您免于编写无用构造函数。