React知识点回忆（四）之组件 & refs

1、添加refs 属性的三种方式

• 字符串形式

  		<script>
  	        class CreateRef extends React.Component {
  				render (){
  					return (
  						<div>
  							<input ref="input" type="text" />
  							<button onClick={ this.setInputValue.bind(this, 'input') }>setInputValue</button>
  						</div>
  					)
  				}
  
  				setInputValue = value => {
  					this.refs.input.value = value
  				}
  			}
  
      		ReactDOM.render(<CreateRef />, document.getElementById('box'))
  		</script>
  

• 回调函数形式

  <script>
      class CreateRef extends React.Component {
  		render (){
  			return (
  				<div>
  					<input ref={ ref => this.input = ref } type="text" />
  					<button onClick={ this.setInputValue.bind(this, 'input') }>setInputValue</button>
  				</div>
  			)
  		}
  
  		setInputValue = value => {
  			this.input.value = value
  		}
  	}
  
      ReactDOM.render(<CreateRef />, document.getElementById('box'))
  </script>
  

  在官方文档中，有这么一句话：如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。
  
  

• createRef

  <script>
      class CreateRef extends React.Component {
  
          input = React.createRef()
  
  		render (){
  			return (
  				<div>
                      <input type="text" ref={ this.input } />
                      <button onClick={ this.btnClick }>点击</button>
  				</div>
  			)
  		}
  
          btnClick = () => {
              console.log(this.input.current)
          }
  	}
  
      ReactDOM.render(<CreateRef />, document.getElementById('box'))
  </script>
  

2、String 类型的 refs 官方不建议使用的原因？()

• 存在效率问题