react组件中方法调用

Agoze 2023-03-28 原文

　　我们在初学react时(有vue等其他基础)，我们在方法调用的时候通常是方法名()

例如：

import React from 'react'
function test() {
  console.log('这是测试')
}
export default class Login extends React.Component{
  state = {
    name:'login'
  }
  
  handleClick = () => {
    console.log('测试点击')
  }
  render() {
    return (
      <div>这是login组件{this.state.name}
        <GoFun />
        <button onClick={this.handleClick()}>点击</button>
        <button onClick={test()}>执行测试函数</button>
        <button onClick={() => {this.setState({name:'李四'})}}>修改state值</button>
      </div>
    )
  }
}

这样调用的话你会发现点击并不能使之触发事件，但是触发了重新渲染(修改state中的值)，在控制台却发现输出了两次：测试点击

若我们写成这样 <button onClick={this.handleClick}>点击</button> 发现并没有什么问题。

但是在javaScript中若我们声明一个函数，调用的时候都是函数名()

例如：

var aa = (data='') => { console.log('这是箭头函数:',data)}
    aa()
    aa('测试')

这是我个人猜测：

在react中，jsx语法通过babel解析成浏览器可以识别的语法，它在解析时可能默认的给每一个方法加上()—自调用

例如：onClick={this.handleClick()} -> onClick={(this.handleClick())()} ---这样比如会报错 this.handleClick(...) is not a function（有可能babel解析时又加了() ）

这样比如： <button onClick={ (() => { console.log('模拟问题:',data)})()}>模拟问题</button>

我们可以拿jax语法中调用函数与javaScript比较

//React代码
import React from 'react'
export default class Login extends React.Component{
  state = {
    name:'login'
  }
  
  handleClick = () => {
    return () => {
      console.log('测试点击')
    }
  }
  render() {
    return (
      <div>这是login组件{this.state.name}
        <button onClick={ this.handleClick()}>模拟问题2</button>
      </div>
    )
  }
}

//Javascript代码

var lee = () => { return () => { console.log('这是jacaScript测试')}}
lee()()

我们可以通过测试得到在babel编辑后的jsx语法中 this.handleClick() == lee()() 的调用

此上都是我个人的猜测

有关react组件中方法调用的更多相关文章

使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
c# - 如何在 ruby 中调用 C# dll？ - 2
如何在ruby中调用C#dll？最佳答案我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL
java - 从 JRuby 调用 Java 类的问题 - 2
我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www
ruby - 调用其他方法的 TDD 方法的正确方法 - 2
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2
说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时
ruby - 如何找到调用当前方法的方法 - 2
如何找到调用此方法的位置？defto_xml(options={})binding.pryoptions=options.to_hifoptions&&options.respond_to?(:to_h)serializable_hash(options).to_xml(options)end 最佳答案键入caller。这将返回当前调用堆栈。文档:Kernel#caller.例子[0]%rspecspec10/16|===================================================62=====
ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2
Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？最佳答案假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"
ruby - 为什么当我调用类的实例方法时，初始化不显示为方法？ - 2
我正在写一篇关于在Ruby中几乎一切都是对象的博客文章，我试图通过以下示例来展示这一点:classCoolBeansattr_accessor:beansdefinitialize@bean=[]enddefcount_beans@beans.countendend所以从类中我们可以看出它有4个方法(当然，除非我错了):它可以在创建新实例时初始化一个默认的空bean数组它可以计算它有多少个bean它可以读取它有多少个bean(通过attr_accessor)它可以向空数组写入(或添加)更多bean(也通过attr_accessor)但是，当我询问类本身它有哪些实例方法时，我没有看到默认
ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2
我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

react组件中方法调用

有关react组件中方法调用的更多相关文章

随机推荐