深入理解React中何时使用箭头函数

class BrokenButton extends React.Component {
 render() {
 return (
  <button onClick={this.handleClick} style={this.state}>
  Set background to red
  </button>
 );
 }

 handleClick() {
 this.setState({ backgroundColor: "red" });
 }
}

render(<BrokenButton />, document.getElementById("root"));

class Button extends React.Component {
 render() {
 return (
  <button
  onClick={() => this.setState({ backgroundColor: "red" })}
  style={this.state}
  >
  Set background to red
  </button>
 );
 }
}

render(<Button />, document.getElementById("root"));

const a = x => x,
  b = x => x;

render(
 <div>
 <h3>
  Are <code>a</code> and <code>b</code> equal by <code>==</code>?
 </h3>
 <p>
  {a == b ? "Yes!" : "No :("}
 </p>
 </div>,
 document.getElementById("root")
);

import PropChangeCounter from "react-armory-prop-change-counter";

class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = { email: "" };
 }
 render() {
 return (
  <div>
  <input
   placeholder="Email"
   value={this.state.email}
   onChange={e => this.setState({ email: e.target.value })}
  />
  <PropChangeCounter
   constant={"this doesn't change"}
   value={this.state.email}
   onChange={e => this.setState({ email: e.target.value })}
  />
  </div>
 );
 }
}

render(<App />, document.getElementById("root"));

class Button extends React.Component {
 render() {
 return (
  <button onClick={this.handleClick} style={this.state}>
  Set background to red
  </button>
 );
 }

 // Note: this syntax is not yet part of JavaScript proper, but is slated
 // for inclusion in the next version. It should already work with Babel.
 handleClick = () => {
 this.setState({ backgroundColor: "red" });
 };
}