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!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址:C语言函数调用栈(一)C语言函数调用栈(二) 0 引言 程序的执行过程可看作连续的函数调用。当一个函数执...
    小猪啊呜阅读 4,722评论 1 19
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,780评论 18 399
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy阅读 9,542评论 1 51
  • 每每看到妈咪认真的“学习”油然而生无限正能量。 妈咪每天学习安排非常满,早晨六点半起床去院子里打太极...
    爱琼瑾阅读 222评论 0 0
  • 是这样的,今天我通过sb把启动页面更换了一下,发现运行到手机的时候这张页面并没有改变。把原来的app删除,清理xc...
    wylei阅读 229评论 0 0