React使用refs代替#id选择器

Question

我看到一些不同的文章说refs是代替#id选择器做事情的"反应方式"。我不知道为什么。使用refs而不是#id的解释是什么?

import {useRef} from 'react';
function Home() {
const exampleRef = useRef(null)
return (
<div ref={exampleRef}> Hello world </div>
)
}
export default Home;

与

function Home() {
return (
<div id='example'> Hello world </div>
)
}

Answer 1

我可以想到两个主要原因:

1. 可以跳过Document.getElementById()直接接入exampleRef.current

2. useRef对象的current属性是完全可变的，可以赋任意值。改变它不会触发完整的组件重新渲染(就像从useState钩子调用setter函数一样)，这有时是性能所必需的。

有时候w3schools的文章缺乏实质内容，但是他们的useRef文章有一些简单用例的好例子。

Answer 2

ReactuseRef返回一个对象，该对象在重新渲染之间保持相同的引用，但current属性是可变的。

ref优于getElementById的原因是

• 它很容易访问，不需要定义一个id到你的DOM节点只是为了访问它。

• 不像idsref是唯一的，你在声明它的时候不需要担心它。如果文档中有多个具有相同id的DOM节点，则getElementById可能不会返回您期望的元素。

你可以在React的beta文档

中阅读更多关于refs的信息