## :-: reference reference: 引用 ```jsx {/* ref字符串形式 */} <input type="text" ref="test" value={this.state.val} onChange={()=>{this.setState({val:this.refs.test.value})}} /> ``` **使用场景：希望直接操作dom元素，或者希望直接使用自定义组件中的某个方法。** * ref作用内置的html组件，得到的将是真实的dom元素。 * ref作用于类组件，得到的是类的实例。 * ref不能作用于函数组件。 * ref不再推荐使用字符串赋值，字符串赋值的方式将来可能会被取消。 **目前ref推荐使用对象或者是函数的形式。** -- *对象形式* 通过 React.createRef 函数创建 ```jsx {/* ref对象形式 */} constructor(props){ super(props); this.txt = React.createRef(); // 对象形式 // this.txt = {current:null}; // 效果一致 } <input type="text" value={this.state.val} ref={this.txt} onChange={()=>{this.setState({val:this.txt.current.value})}} /> ``` -- *函数形式* ```jsx {/* ref函数形式 */} <input type="text" ref={el=>{this.txt=el}} value={this.state.val} onChange={()=>{this.setState({val:this.txt.value})}} /> ``` **谨慎使用ref，尽量少的使用它** ## :-: Ref转发 React.forwardRef 方法 1.参数：传递的是函数组件 2.返回值：返回一个新的组件 ```jsx // 传递函数组件Func，得到一个新的组件NewFunc (跟高阶组件差不多) const NewFunc = React.forwardRef(Func); console.log(this.xxx) <NewFunc ref={this.xxx} /> ```