我遇到一个奇怪的问题,我无法理解。当我为TextInput
分配回调并尝试使用箭头函数使事件脱离回调时,ios模拟器开始使用大量CPU,就好像处于无限循环中一样:主线程未被阻塞,但我认为是JS线程。 CPU持续高于%100,除非我退出应用程序,否则它不会掉下来。我在下面写下了令人反感的代码:
// LoginForm.js
render () {
return <FormItem onFocus={this.onFocus} onBlur={this.onBlur} />
}
FormItem
组件的render方法的一部分呈现如下:
// FormItem.js
render () {
const { onFocus, onBlur } = this.props
<FormInputRow
ref={ref => (this.formInputRef = ref)}
{...{
onFocus,
onBlur,
}}
/>
}
FormInputRow
组件的render方法的一部分是:
// FormInputRow.js
render () {
const { onFocus, onBlur } = this.props
return (
<StyledTextInput
innerRef={ref => (this.textInputRef = ref)}
onFocus={onFocus}
onBlur={onBlur}
/>
)
}
在LoginForm.js
中,如果以这种方式定义onFocus
和onBlur
没问题:
// LoginForm.js
constructor (props) {
super(props)
this.onFocus = this.onFocus.bind(this)
this.onBlur = this.onBlur.bind(this)
}
onFocus () {
console.tron.log('Focus event')
}
onBlur () {
console.tron.log('Blur event')
}
但是如果函数是使用event
参数定义的,例如:
// LoginForm.js
constructor (props) {
super(props)
this.onFocus = this.onFocus.bind(this)
this.onBlur = this.onBlur.bind(this)
}
onFocus (event) {
console.log('Focus event')
console.log(event)
}
onBlur (event) {
console.log('Blur event')
console.log(event)
}
我第一次聚焦TextInput
时,CPU超过%100。可能是什么原因造成的?