使用 useRef 或 createRef

Question

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

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

阅读useRef和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>
)}

Answer 1

createRef用于class 组件，在 function 组件的上下文中调用它将被视为普通 function ，因此将在每次渲染时重新初始化您的参考。

useRef用于function 组件，卸载时会丢失参考。