react组件中方法调用

快跑的乌龟 React 2023-03-07 20 0 原文

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