代码之家 › 专栏 › 技术社区 › akaralar

用带有事件的TextInput回调函数对本机iOS模拟器的高CPU使用率作出反应

react-native ios javascript

akaralar · 技术社区 · 6 年前

我有个奇怪的问题,我搞不懂。当我分配回调给 TextInput 尝试用箭头函数从回调中获取事件,ios模拟器开始使用大量CPU,就像在一个无限循环中一样:主线程没有阻塞,但我认为JS线程是。CPU一直在100%以上,除非我退出应用程序,否则不会掉下来。我把违规代码写在下面:

// LoginForm.js
render () {
  return <FormItem onFocus={this.onFocus} onBlur={this.onBlur} />
}

部分 FormItem

// FormItem.js
render () {
  const { onFocus, onBlur } = this.props
  <FormInputRow
    ref={ref => (this.formInputRef = ref)}
    {...{
      onFocus,
      onBlur,
    }}
  />
}

FormInputRow 组件渲染方法是:

// 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)
}

当我第一次聚焦时,CPU会超过100%