React hooks学习笔记(6)——useRef

78 阅读 0 评论 52 点赞

我是靠谱客的博主时尚微笑，最近开发中收集的这篇文章主要介绍React hooks学习笔记(6)——useRef，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ref是reference的缩写，译为引用。直接看demo，还是老样子创建一个RefDemo.js

import React from 'react';

export default function RefDemo() {
    return (
        <div>
            refDemo
        </div>
    );
}

，并在App.js中将其引入:

...
import RefDemo from "./components/RefDemo";

function App() {
    ...
  return (
    <div>
       ...
       <RefDemo />
    </div>
  );
}

export default App;

现在有一个需求，RefDemo里一个input需要页面刷新时聚焦(传统做法是用inputDom.focus()):

import React from 'react';

function Input() {
    return <input />
}
export default function RefDemo() {
    return (
        <div>
            <Input />
        </div>
    );
}

现在用上useRef就可以这么写:

import React, { useEffect, useRef } from 'react';

function Input() {
    const inputRef = useRef();
    useEffect(() => {
        inputRef.current.focus();
   }, []);
    return <input ref={inputRef}/>
}
export default function RefDemo() {
    return (
        <div>
            <Input />
        </div>
    );
}

为了更统一，需要在组件的父级写，就可以改成这样，还可以传递value:

import React, { useEffect, useRef } from 'react';

const Input = React.forwardRef((props, ref) =>  {
    return <input ref={ref}/>
})
export default function RefDemo() {
    const aref = useRef();
    useEffect(() => {
        aref.current.focus();
        // deliver value
        aref.current.value = "hello, world";
    }, []);

    return (
        <div>
            <Input ref={aref}/>
        </div>
    );
}

代码参考