React: useState()和useRef()的区别

Question

我已经阅读了React文档。

我正试图在脑海中比较useState()和useRef()……

useState()和useRef()的共同点：

• 仅适用于函数组件
• 创建静态值-值在函数调用之间保持不变
• 值是可变的
• 在它们的函数组件内有范围
• 范围包括函数组件中的其他钩子（use）

useState()和useRef()的区别：

• useState()会触发重新渲染，而useRef()不会。
• useRef()可以引用子元素（通过“ref = {}”），useState()不能。
• 对于子DOM元素，ref = {}是指DOM元素本身。
• 对于子React组件，ref = {}是指子组件本身。

…还有这个之前的Stackoverflow问题补充说：

• useState()异步更新其值，useRef()同步更新。

所以我目前有三个问题：

1. 上述共同点和区别是否正确？
2. 我应该注意到任何其他共同点或区别吗？
3. 从创建引用的组件（useRef + ref = {}）中，我可以获取和设置子组件上的值吗？ (是的，这可能明智也可能不明智)

- JustAsking

---

两者用于不同的目的，本质上没有可比性。 - Anurag Srivastava

Answer 1

基本上你的比较是正确的，但正如评论中已经提到的，它们服务于不同的目的。你只需要知道的是useRef基本上是语法糖：

useRef()基本上就是useState({current: initialValue})[0]

- slesh