我們在初學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()() 的呼叫
此上都是我個人的猜測
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546120.html
標籤：其他
上一篇：創建型-單例模式