跳到主要内容

认识

2024年03月11日
柏拉文
越努力，越幸运

一、认识​

Refs 提供了一种访问在 render 方法中创建的 DOM 节点或者 React 元素的方法。另外, Refs 也可以存储数据。ref 对象可以通过 createRef 或者 useRef 创建出来的对象，一个标准的 ref 对象应该是如下的样子:

{
    current:null , // current指向ref对象获取到的实际内容，可以是dom元素，组件实例，或者其它。
}

二、创建​

2.1 useRef()​

函数组件创建 Ref ，可以用 hooks 中的 useRef 来达到同样的效果

语法

export default function Index(){
    const currentDom = React.useRef(null)
    React.useEffect(()=>{
        console.log( currentDom.current ) // div
    },[])
    return  <div ref={ currentDom } >ref对象模式获取元素或组件</div>
}

2.2 createRef()​

语法

class Index extends React.Component{
    constructor(props){
       super(props)
       this.currentDom = React.createRef(null)
    }
    componentDidMount(){
        console.log(this.currentDom)
    }
    render= () => <div ref={ this.currentDom } >ref对象模式获取元素或组件</div>
}

三、获取​

3.1 数值​

const Test(){

    const divRef: RefObject<HTMLDivElement> = useRef(null);

    return <div ref={ divRef }></div>

}

用一个字符串ref标记一个DOM元素，一个类组件。注意: 函数组件没有实例、不能被 ref 标记。React 在底层逻辑，会判断类型，如果是 DOM 元素，会把真实 DOM 绑定在组件 this.refs (组件实例下的 refs )属性上，如果是类组件，会把子组件的实例绑定在 this.refs 上。

3.2 函数​

const Test(){

    const setCustomRef = (dom: HTMLDivElement)=>{
        console.log(dom);
    }

    return <div ref={ (dom)=> setCustomRef(dom)}></div>
}

当用一个函数来标记 Ref 的时候，将作为 callback 形式，等到真实 DOM 创建阶段，执行 callback ，获取的 DOM 元素或组件实例，将以回调函数第一个参数形式传入，所以可以像上述代码片段中，用组件实例下的属性 currentDom 和 currentComponentInstance 来接收真实 DOM 和组件实例。

四、场景​

4.1 获取元素​

const Test(){

    const setCustomRef = (dom: HTMLDivElement)=>{
        console.log(dom);
    }

    return <div ref={ (dom)=> setCustomRef(dom)}></div>
}

4.2 缓存数据​

4.3 获取循环列表元素​

const Test(){

    const list = [……];
    const divItemRefMap = {};


    const setItemRef = (key, dom: HTMLDivElement)=>{
        console.log(dom);
        divItemRefMap[key] = dom;
    }

    return <div>
        {
            list.map((item,index)=>{
                return <div ref={ (dom)=> setItemRef(index, dom)}></div>
            })
        }
    </div>
}