{()=>(this.whatever)} vs {this.whatever}

Question

假设我们有一个处理程序(在我们的类中扩展组件中的react)

whatever = () => {
//Something 
}

我们什么时候做

onClick="{()=> this.whatever}" ,当javascript处理我们的代码(或编译/读取)时,在click事件发生之前不会执行

相反

一旦javascript到达这一点或读取它,就应该执行{this.whatever}.

因此,我们通常使用这个{()=> this.whatever} 我们希望事件发生在有人说点击后？并且{this.whatever}在JS编译时会立即执行handler /方法吗？

[更新]

在我通过以下教程制作的反应应用程序中,我们有箭头函数处理程序说whatever这样传递给子组件<BuildControls whatever={this.whatever} />.在子组件中,我们做了<button onClick={props.whatever} />哪些工作.那么我们为什么不这样做<button onClick={() => props.whatever} />(如果按照后面的方法,onClick事件也不起作用)

Answer 1

{this.whatever} 是不一样的 {this.whatever()}

在javascript(和大多数其他语言)中执行一个函数你需要括号.如果您使用{this.whatever}将函数作为参数传递给prop,并且当用户单击传递的函数时将被触发.

以下是显示差异的示例代码.

const whatever = () => {
  return "I log from function";
}

console.log(whatever); // returns function
console.log((() => whatever)); //returns a function that returns a function
console.log(whatever()); // runs the function

示例React应用程序(现场演示)

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class CustomButton extends React.Component {
  render() {
    console.log("passed function", this.props.onButtonClick);
    return (
      <button
        onClick={e => this.props.onButtonClick(e, "something from button")}
      >
        {this.props.name}
      </button>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.test1 = this.test1.bind();
  }
  test1(e) {
    // I'm a regular function
    // I need to be bind
    e.preventDefault();
    console.log("test 1");
  }
  test2(e) {
    // I'm a regular function
    // I need to be bind
    e.preventDefault();
    console.log("test 2");
  }
  test3 = e => {
    // I'm an arrow function
    // I don't loose context of this
    // so I don't need to be bind
    e.preventDefault();
    console.log("test 3");
  };
  test4 = (e, text) => {
    // I am passed down to child component
    // run with an extra argument
    e.preventDefault();
    console.log(text);
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.test1}>Test 1</button>
        <button onClick={this.test2.bind(this)}>Test 2</button>
        <button onClick={this.test3}>Test 3</button>
        <CustomButton onButtonClick={this.test4} name="Test 4" />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

一些文档要阅读

• Function.prototype.bind()
• 箭头功能
• 处理事件