ReactコンポーネントのJSXでの関数の渡し方メモ

主に下記4つの作戦があるらしいです。
（クラスではなく関数としてコンポーネントを定義した時とかはよくわからないです）

• 1. bind作戦
• 1. arrow function作戦
• 1. render内でbind作戦
• 1. render内でarrow function作戦

3,4 はrenderが呼ばれるごとに関数を作るらしいので、リストとかでこれやってるとたくさん関数を作ってしまい、関数作成はコストもままかかるらしいのでうので、パフォーマンスに良くないらしい。
なので、1か2で悩むところですが、1は関数が増えたら定型文が増えてってちょっと汚いので、2のほうがスマート。まあ、1でも問題はないらしい。

1. bind作戦

class Form extends Component {

  constructor(props) {
    super(props)

    // bind作戦
　　　　　　　　this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  handleSubmit() {
    ...
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="submit" value="Submit">
      </form>
    )
  }
}

2. arrow function作戦

class Form extends Component {
  
  // arrow function作戦
  handleSubmit = () => {
    ...
  }

 // 引数がある時の場合  
  handleSubmit = (thing) => () => {
    ...
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="submit" value="Submit">
      </form>
    )
  }
}

3. render内でbind作戦

class Form extends Component {
  
  handleSubmit() {
    ...
  }

  // render内でbind作戦
  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input type="submit" value="Submit">
      </form>
    )
  }
}

4. render内でarrow function作戦

class Form extends Component {
  
  handleSubmit() {
    ...
  }

  // render内でarrow function作戦
  render() {
    return (
      <form onSubmit={() => this.handleSubmit()}>
        <input type="submit" value="Submit">
      </form>
    )
  }
}