#react 为什么不建议内联ref回调或函数？

如果将ref回调定义为内联函数，则它将在更新期间被调用两次，首先是null，然后是DOM元素。这是因为每个渲染都会创建该函数的新实例，因此React需要清除旧的ref并设置新的ref。

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }


  render () {
   return (
     <form onSubmit={this.handleSubmit}>
       <input
         type='text'
         ref={(input) => this.input = input} /> // Access DOM input in handle submit
       <button type='submit'>Submit</button>
     </form>
   )
 }
}

但是我们期望在组件安装时，ref回调会被调用一次。一种快速解决方案是使用ES7类属性语法来定义函数

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }


  render () {
   return (
     <form onSubmit={this.handleSubmit}>
       <input
         type='text'
         ref={(input) => this.input = input} /> // Access DOM input in handle submit
       <button type='submit'>Submit</button>
     </form>
   )
 }
}