使用 useRef 或 createRef

Posted 2023-02-22

【中文标题】使用 useRef 或 createRef

【英文标题】：using useRef or createRef

【发布时间】：2021-08-09 10:18:45

【问题描述】：

我想通过按下按钮将const [solution, setSolution] = useState(0); 设置为输入元素的值

我使用 createRef 或使用 useRef 钩子得到相同的结果

阅读What's the difference between useRef and createRef?

给出不同的答案，他们到底要做什么，里面有没有明确的方法？

function Interface() 

    const [solution, setSolution] = useState(0);
  
    const solutionInp = useRef();
    //                --createRef();
    
    const onButtonClick = () => 
    // `current` points to the mounted text input element
    setSolution( solutionInp.current.value)
      ;


return (
 
<input
 type="text"
 // value=solution
 
 ref=solutionInp
 // onInput=(e) => setSolution(e.target.value)
 />
 </section>
<button type="button" onClick=onButtonClick>do</button>
)

【问题讨论】：

您提供的链接给出了所有答案。在功能组件中使用 useRef，因此它不会在重新渲染时重新创建。在类组件中，在构造函数中使用 createState，因为它只使用一次。

你检查过文档吗？ createRef 是 Class 组件 API 的一部分，显然您将 useRef 视为钩子（功能组件）API 的一部分。

【参考方案1】：

createRef 用于类组件，在函数组件的上下文中调用它将被视为普通函数，因此将RE-INITIAL 您在每次渲染时的参考。

useRef 用于功能组件，您会在卸载生命周期中丢失您的 ref。