持续更新
1.写代码过程中webstorm底部一直闪烁,代码也提示不了
File->Invalidate Cahes/Restart -> Invalidate and Restart
复制代码
2.按钮未点击自动执行点击事件
handlerClick = (questionId)=>{
console.log('我执行了')
}
<button type="button"
onClick={
this.handlerClick(question_id)
}>补习详情
</button>
复制代码
handlerClick (questionId){
console.log('我被点击了')
}
<button type="button"
onClick={
this.handlerClick.bind(this,question_id)
}>补习详情
</button>
复制代码
第一种和第二种是两种常见的函数定义方法,第一种是箭头函数,第二种是普通函数。推荐用箭头函数
- 避免普通函数this造成的一系列问题,而箭头函数this指向函数定义的组件
- 每次刷新组件都会重新执行bind方法,对性能有影响
但是第一种箭头函数确带来了奇怪的问题:按钮未点击handlerClick函数自动执行了,而不传参数的话是不会自动执行的,这是为什么?明明看起来两种写法差不多!在讲这个问题之前我们首先来看一下匿名函数
function (){
console.log('我执行了')
}
复制代码
忽略箭头函数的内部细节,我们发现其实箭头函数就是匿名函数。再来看看匿名函数是如何执行的
(function (){
console.log('我执行了')
})()
复制代码
聪明的你应该发现问题了,第一种箭头函数传参就相当于匿名函数立即执行。讲清楚了为什么会立即执行,看下如何解决
<button type="button"
onClick={()=>{
this.handlerClick(question_id)
}
}>补习详情
</button>
复制代码
这有什么区别?第一种箭头函数的写法等价于
onClick=(function(){
console.log('我执行了')
})(questionId)
复制代码
第二种等价于
onClick=function(){
return function handlerClick(questionId){
console.log('我执行了')
}
}
复制代码
那么bind为什么不会立即执行?因为bind返回的还是函数
3.ant Design Select组件的坑
<Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
{
allClass.map((value, index) =>
<Select.Option value={index}>{value.class_name}</Select.Option>
)
}
</Select>
复制代码
开始allClass是空数组,等到网络请求返回allClass才有数据,然后组件会刷新。这时候很奇怪defaultValue没有刷新,莫名其妙的设置不了默认数据。会出现下图所示的情况
下面的写法可以避免这种情况
{
allClass.length !== 0 ?
<Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
{
allClass.map((value, index) =>
<Select.Option value={index}>{value.class_name}</Select.Option>
)
}
</Select> : <div/>
}
复制代码
这种写法更优雅
{
allClass.length !== 0 &&
<Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
{
allClass.map((value, index) =>
<Select.Option value={index}>{value.class_name}</Select.Option>
)
}
</Select>
}
复制代码