react组件中方法调用

  我们在初学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()() 的调用

此上都是我个人的猜测

热门相关:地球第一剑   致灿烂的你   小妈妈的朋友   别那么骄傲   别那么骄傲