连续两次被问到，故学习下做记录
下面学习来自水哥和掘金文章
React中的组件分为将状态变化交由React处理的组件和通过ref引用获取的组件两种，前者称为受控组件，后者称为非受控组件，非受控组件的状态在组件自身存储，需要的时候通过ref查询DOM并查找其值。
受控组件：
- 表单组件
Input的值通过onChange回调交给React处理 React获取到表单的值(e.target.value)之后，将其保存到了状态变量name中- 界面展示内容通过读取组件状态
name，因此name的变化触发<div>hello {name}</div>的重新渲染
非受控组件：
-
React通过ref获取input元素的值 -
input值由用户改变，点击提交按钮，在handleSubmit中通过ref获取DOM元素，进而读取输入框的值 -
输入框的变化并未交由组件控制，而是通过
ref获取，也就是直接在DOM中读取
作者：卷帘依旧
链接：juejin.cn/post/702098…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
直接看代码最直观
export default function App() {
const [num,setNum] = useState(0);
const ref = useRef<HTMLInputElement>(null);
return (
<form>
<input type="text" value={num} onChange={(e) => setNum(+e.target.value)} />
<input type="text" defaultValue={num} ref={ref}/>
<button type="button" onClick={()=>{setNum(num+1)} }>点击</button>
<button type="button" onClick={()=>{console.log(ref.current?.value)}}>打印非受控组件值</button>
</form>
)
}
当然要获取受控组件的值可以直接打印null
非受控组件则需要用到ref获取dom来打印（如代码所示）
