react-native - 引数として関数を呼び出す

Question

私は疑問を持っています。この質問は、JavaScriptやReact-Nativeよりもさらに厳しいかもしれませんが、私は試してみます。私は次のコンポーネントを持っています：

export default class Body extends Component { 

    componentWillMount() { 
    this.refresh(); 
    } 

    clickme() { 
    console.log('I have been pressed!!!!!'); 
    } 

    refresh() { 
    this.props.populateGrid(); 
    } 
    render() { 
    return (
     <View style={styles.body}> 
     <Grid inGrid={this.props.grid} /> 
     <Button 
      onPress={this.clickme} 
      title={'PressMe'} 
     /> 
     </View> 
    ); 
    } 

} 

まず、this.clickme（）をonPressに渡しました。それはうまくいかなかった。それは作業を開始したブレースを取り除いた後であった。どうして？私たちは通常、（）を含む関数を呼び出しませんか？また時には、something = {（）=> this.clickme（）}の形式で渡す必要があります。なぜ/いつ？

ように我々は関数を呼び出します：

1. {this.clickme} 
2. {this.clickme()} 
3. {() => this.clickme()} 

はありがとうございます。

Answer 1

短い答えは：

1と3、あなたの質問に定義するように効果的にButton.onPressも同じです - 彼らは体を機能させるの参照を渡しています。しかし、＃3は新しい関数をインラインで定義していますが、非常に軽量な方法で定義されています。 ＃2が関数をインラインで呼び出そうとしています。 Button.onPressが必要とするように、コールバック関数ではなくプロパティに数値またはブール値または文字列値を渡す必要がある場合に、これを行うことができます（＃2）。

長い答え：

必要な構文はあなたが反応するコンポーネント上にデータを渡しているメソッドのシグネチャによって定義されます。この場合、Button.onPressについては、() => {}というシグネチャがあります。つまり、コールバック関数を呼び出し、呼び出されたときに引数を渡さないということです。コンポーネントを定義するときにユーザーがクリックしていないので、関数をすぐに呼び出す必要はありません。後でランダムな時間をクリックしています。

関数を渡す必要があるため、関数名の末尾に（）を含める必要はありません。カッコで囲まれていると、すぐに関数が実行されますが、名前だけで関数本体への参照が渡されます。その参照は、後でButton.onPressによって呼び出され、ユーザーのやりとりを処理します。

多くのJavaScript（とReact）は、関数参照を渡し、後でこれらの関数を他の関数内から呼び出すパターンで書かれています。あなたがそのパターンに精通していないなら、間違いなくコールバックパターンについて読んでください。

() => {}も、インラインの無名関数を定義するための簡潔な方法です。これは矢印関数と呼ばれ、別々の関数本体を定義することよりもいくらかのパフォーマンスの向上が得られます。ここ

さらに詳しい情報：

• () => {} (arrow function) documentation on MDN
• Callback documentation on MDN