通过带有事件的TextInput回调函数来响应Native iOS模拟器的高CPU使用率

时间:2018-09-03 02:33:04

标签: javascript ios react-native

我遇到一个奇怪的问题,我无法理解。当我为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中,如果以这种方式定义onFocusonBlur没问题:

// 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。可能是什么原因造成的?

0 个答案:

没有答案