第一版（已经过时)

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    constructor(props) {
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange() {
        this.refs.myref.focus();
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.name}
                    ref="myref"
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

createRef

import React, { MutableRefObject, useRef } from 'react'
const TextInputWithFocusButton: React.FC = () => {
   const inputEl: MutableRefObject<any> = createRef()
   const handleFocus = () => {
       // `current` 指向已挂载到 DOM 上的文本输入元素
       inputEl.current.focus()
   }
   return (
       <p>
           <input ref={inputEl} type="text" />
           <button onClick={handleFocus}>Focus the input</button>
       </p>
   )
}
export default TextInputWithFocusButton

usRef

import React, { MutableRefObject, useRef } from 'react'
const TextInputWithFocusButton: React.FC = () => {
   const inputEl: MutableRefObject<any> = useRef()
   const handleFocus = () => {
       // `current` 指向已挂载到 DOM 上的文本输入元素
       inputEl.current.focus()
   }
   return (
       <p>
           <input ref={inputEl} type="text" />
           <button onClick={handleFocus}>Focus the input</button>
       </p>
   )
}
export default TextInputWithFocusButton

createRef,useRef的区别联系

可以看到在函数中createRef，useRef的用法是相同的。但是之间的差别还是挺多的。

• createRef可以用在类组件中，但是useRef是一个hook,只能用在函数组件中。
• createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。