javascript - 在 React 中将类方法绑定(bind)到 this

Question

我对 React 有点陌生，刚刚开始阅读学习 React 之路免费电子书。无论如何，书中有一部分说，为了在类方法中访问this，我们需要将类方法绑定(bind)到this。那里提供的示例清楚地表明:

class ExplainBindingsComponent extends Component {
    onClickMe() {
      console.log(this);
    }
    render() {
      return (
         <button
           onClick={this.onClickMe}
            type="button"
           >
          Click Me
        </button>
    );
  }
}

单击按钮时，this 未定义，如果我添加一个带有以下内容的构造函数:

constructor() {
  super();
  this.onClickMe = this.onClickMe.bind(this);
}

我可以在方法内访问this。但是，我现在很困惑，因为我正在查看一个没有绑定(bind)且可以访问的示例:

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
       list,
    };

  }

  onDismiss(id) {
    console.log(this);
    const updatedList = this.state.list.filter(item => item.objectID !== id);
    this.setState({list: updatedList});
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(item => 
             <div key={item.objectID}>
                <span>
                  <a href={item.url}>{item.title}</a>
                </span>
                <span>{item.author}</span>
                <span>{item.num_comments}</span>
                <span>{item.points}</span>
                <span>
                     <button
                         onClick={() => this.onDismiss(item.objectID)}
             type="button"
                     > 
             Dismiss
                     </button>
                </span>
              </div>
        )}
      </div>
    );
  }
}

在onDismiss内部，我可以毫无问题地打印this，尽管我没有绑定(bind)它？这与第一个示例有何不同？

Answer 1

这四个字符的原因:

 () =>

这是一个箭头函数。与常规函数不同，它们没有自己的上下文(又名 this)，而是采用其父函数之一(在本例中为 render())，并且具有正确的上下文。