react中三種函式呼叫方法總結

隔壁大神剛剛跟我說了一個知識點，總結如下，以備後查！

方式一：內聯呼叫法

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcOne(){
        console.log('內聯呼叫法')
    }
    render(){
        return (
            <button onClick={this.funcOne.bind(this)}></button>
        )
    }
}

方式二：配置中呼叫法

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
        this.funcTwo = this.funcTwo.bind(this)
    }
    funcTwo(){
        console.log('配置中呼叫法')
    }
    render(){
        return (
            <button onClick={this.funcTwo}></button>
        )
    }
}

方式三：箭頭函式呼叫法（最推薦）

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcThree:() => {
        console.log('箭頭函式呼叫法')
    }
    render(){
        return (
            <button onClick={this.funcThree}></button>
        )
    }
}

THE END!