- A+
所属分类：Web前端
我们在初学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()() 的调用
此上都是我个人的猜测
