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()() 的調用

此上都是我個人的猜測