之前对ref用法的了解一直仅限于如下:
<input ref="input" />
然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例,其实就是dom元素节点。
let inputEl = this.refs.input;
//然后通过inputEl来完成后续的逻辑,如focus、获取其值等等
大多数教程上指明的用法都如上,其实这种方式基本不推荐使用,或者在未来的react版本中不会再支持该方式。
ref的另一种用法是传入回调函数:
这也是官方强烈推荐的用法;这个函数执行的时机为:
1.组件被挂载后,回调函数被立即执行,回调函数的参数为该组件的具体实例。
2.组件被卸载或者原有的ref属性本身发生变化时,回调也会被立即执行,此时回调函数参数为null,以确保内存泄露。
例如下面代码:
RegisterStepTwo = React.createClass({
getInitialState(){
return {visible: true};
},
changeVisible(){
this.setState({visible: !this.state.visible});
},
refCb(instance){
console.log(instance);
},
render(){
return(
<div>
<button type="button" onClick={this.changeVisible}>{this.state.visible ? '卸载' : '挂载'}ConfirmPass
</button>
{
this.state.visible ?
<ConfirmPass ref={this.refCb} onChange={this.handleChange}/>: null
}
</div>
)
}
});
上述代码,渲染到页面时可以发现console.log出对应的组件实例,切换按钮时,ConfirmPass也在挂载与卸载之间切换,所以能看到不同的console.log结果。