我正在浏览hooks文档，突然发现了useRef
看看他们的例子
函数文本输入带焦点按钮（）{
const inputEl=useRef（null）；
const onbutton单击=（）=>{
//`current`指向装入的文本输入元素
inputEl.current.focus（）；
};
返回(
<；>；
<；input ref={inputEl}type=“text”/>；
<；button onClick={onButtonClick}>；聚焦输入<；/button>；
<；/>；
);
}
…似乎useRef可以替换为createRef
函数文本输入带焦点按钮（）{
const inputRef=createRef（）；//区别是什么？
const onbutton单击=（）=>{
//`current`指向装入的文本输入元素
inputRef.current.focus（）；
};
返回(
<；>；
<；input ref={inputRef}type=“text”/>；
<；button onClick={onButtonClick}>；聚焦输入<；/button>；
<；/>；
);
}
为什么我需要一个裁判钩？为什么useRef存在
不同之处在于createRef将始终创建一个新的ref。在基于类的组件中，您通常会在构造期间将ref放入实例属性中（例如this.input=createRef（））。函数组件中没有此选项useRef负责每次返回与初始渲染相同的ref
下面是一个示例应用程序，演示了这两个功能的行为差异：
导入React，{useRef，createRef，useState}来自“React”；
从“react dom”导入react dom；
函数App（）{
const[renderIndex，setRenderIndex]=useState（1）；
const refFromUseRef=useRef（）；
const refFromCreateRef=createRef（）；
如果（！refFromUseRef.current）{
refFromUseRef.current=renderIndex；
}
如果（！refFromCreateRef.current）{
refFromCreateRef.current=renderIndex；
}
返回(
<；div className=“App”>；
当前渲染索引：{renderIndex}
<；br/>；
在refFromUseRef.current中记住的第一个渲染索引：
{refFromUseRef.current}
<；br/>；
第一个渲染索引在中未成功记住
refFromCreateRef.current：
{refFromCreateRef.current}
<；br/>；
<；按钮onClick={（）=>；setRenderIndex（prev=>；prev+1）}>；
使重新渲染
<；/button>；
<；/div>；
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（<；App/>；，rootElement）；