React出现后,提供了state, props,前端开发者无须在直接操作dom。React官方不推荐我们直接访问、操作DOM,但是,还是为我们留了一个后门ref,方便访问操作DOM。因为在某些特定的场景,必须使用ref来访问DOM元素。比如:input的focus,媒体播放器、组件的位置,动画,引入第三dom方库。
创建和获取ref
在reactd的版本历史上,出现了三种创建ref的方式:string ref,callback ref,React.createRef。无论哪种方式,都是为ref属性赋值,ref和key一样,都是关键字,为React内部使用。 另外,值得注意的是,所有的ref获取,最好在组件加载结束之后,否则无法获取值。因为组件加载后,dom才准备好了是吧。
string ref
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.refs.first);
// <input value="first">
}
render() {
// 创建
return <input value="first" ref="first" />
}
}
string ref创建的ref的方法在React16.3之后的版本弃用了,并且官方表示,在16.3之前,尽量使用callback ref来创建ref。因为string ref创建的ref带有些问题,具体原因见连接。
callback ref
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.second);
// <input value="second">
}
render() {
// 创建
return <input value="second" ref={(input) => {this.second = input }} />
}
}
通过回调函数的方式创建ref,形势上看上去稍微有些繁琐。并且,callback以上面这种内联的方式赋值,在组件发生了更新时,ref都会重新创建。可通过将这个回调函数变成类的方法来避免。
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.second);
// <input value="second">
}
createRef = (dom) => {
this.second = dom;
}
render() {
// 创建
return <input value="second" ref={this.createRef} />
}
}
React.createRef
class Test extends React.Component {
constructor(props) {
super(props);
// 创建
this.third = React.createRef();
}
componentDidMount(){
// 获取
console.log(this.third.current);
// <input value="third">
}
render() {
// 赋值
return <input value="third" ref={this.third} />
}
}
React.ref是React16.3后新加的一个创建ref的方法,写法相对于callback ref的写法相对简洁。将创建的ref赋值给不同的子元素,ref的current的值有所区别。
不同子元素的ref值
这里讨论通过callback ref和React.createRef创建的ref,赋值给不同的子元素后,ref的取值的不同。
HTML元素
为HTML元素的ref赋值,获取到的ref的值为这个HTML元素对应的DOM元素。
class Test extends React.Component {
second = React.creteRef()
handleSubmit = () => {
console.log(this.first);
// <input value="first">
console.log(this.second.current);
// <input value="second">
}
render() {
// 创建
return (
<div>
<input value="first" ref={(input) => {this.first = input} } />
<input value="second" ref={this.second} />
<button onClick={this.handleSubmit} >提交</button>
</div>
)
}
}
class类创建的React组件
为class类创建的React组件的ref赋值后,最终获取到的值为这个React组件的实例。
class Test extends React.Component {
second = React.createRef()
handleSubmit = () => {
console.log(this.first);
// Hello {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
console.log(this.second.current);
// Hello {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
}
render() {
return (
<div>
<Hello ref={(input) => {this.first = input}} />
<Hello ref={this.second} />
<button onClick={this.handleSubmit}>submit</button>
</div>
)
}
}
function创建的React组件
遗憾的是,两种方法均无法为function创建的React组件ref赋值,就算赋值,获取到的最终结果为null。
进阶的ref使用
通过react提供的ref,父组件可以获取到具体的某个子元素,这是基本的用法。以下还将提到一些进阶用法。
React.forwardRef
这里有个问题存在,有没有办法穿过父组件,获取子元素?正好,与React.createRef一起出世的还有一个用于解决这个问题的直接办法React.forwarRef。其实,这个这个问题主要出现在HOC高阶组件上,开发者可以通过React.forwardRef获取WrapperedComponnet,而不是外面的包裹层。
class FancyInput extends React.Component{
render() {
return <input value="fancyInput" />
}
}
const HOCFn = (WrapperedComponent) => {
class Test extends React.Component {
render() {
const { forwardRef, ...rest } = this.props;
return (
<WrapperedComponent ref={forwardRef} {...rest} />
)
}
}
return React.forwardRef((props, ref) => {
return <Test forwardRef={ref} {...props} />
});
}
const HocEdComp = HOCFn(FancyInput);
export default class NewComp extends React.Component {
handleSubmit = () => {
console.log(this.testRef);
// FancyInput
}
render() {
return (
<div>
<HocEdComp ref={(dom) => { this.testRef = dom }} />
<button onClick={this.handleSubmit}>提交</button>
</div>
)
}
};
最终,从上面的例子可知,this.testRef指向的是FancyInput,而非HocEdComp。
获取资源子元素中指定的DOM
父元素可以通过ref机制获取html元素,React组件实例,当然这两者都是作为父元素的子元素存在。在这里我们看到几点局限性:
- 无法获取React组件中的某个dom元素
- 无法获取function创建的组件
在这里,可以使用一些小技巧。看例子:
const First = (props) => {
return <input value="first" ref={props.firstRef} />
}
class Second extends React.Component {
render() {
return <input value="second" ref={this.props.secondRef} />;
}
}
export default class Test extends React.Component {
handleSubmit = () => {
console.log(this.first);
// <input value="first">
console.log(this.second)
// <input value="second">
}
render() {
return (
<div>
<First firstRef={(input) => { this.first = input }} />
<Second secondRef={(input) => { this.second = input }} />
<button onClick={this.handleSubmit}>submit</button>
</div>
)
}
}
这种方法的本质是,将创建的ref作为props传递给React组件,React组件的某个HTML元素的ref接收这个属性,父元素便可获取到子组件中具体的某一个HTML元素的底层DOM。这样做,破坏了组件的封装性,但是有时万不得已只能这么做了。
总结
React提供ref的初衷是给开发者一个可获取实际DOM的工具,目前,我们也可以通过ref获取子组件(React组件),但是,React还是提倡不要过度使用ref,,毕竟有了state,props,我们已经从各种繁杂的DOM操作中解放出来。在工作中,有时候设计到动画,或者媒体播放器,input聚焦时,我会使用以下ref,确实解决了state和props无法解决的问题。
我只是总结可以如何使用ref,并没有细细了解ref的原理,找个机会希望可以一探究竟,又当了一次搬运工。