React 受控组件和非受控组件
2021-05-14 09:39:35
# 前提
只有表单的输入元素区分受控组件和非受控组件
# 受控组件
表单元素含有 `value` 属性，且 `value` 绑定到 `state`。当元素没有更新到 `state` 的 `onChange` 事件时，无法改变组件的值。每当输入的值改变，组件会被重新渲染。
>```react
>function Input() {
> const [content, setContent] = useState("")
> return (
> <input
> value={content}
> onChange={(e) => {setContent(e.target.value)}}
> />
> )
>}
>```
# 非受控组件
表单元素没有 `value` 属性，输入会使用 DOM 原生方法及时反馈到页面上，输入改变时，组件不会重新渲染。
>```react
>function Input() {
> const [content, setContent] = useState("")
> return (
> <input
> onChange={(e) => {setContent(e.target.value)}}
> />
> )
>}
>```
# 为什么要使用受控组件
使用受控组件，可以做到在输入的时候获得实时处理，比如将输入的值转换为大写字母，限制输入的字符总数，在输入的同时做格式判断等。
> 将输入的字符实时转换为大写：
>
> ```react
> function Input() {
> const [content, setContent] = useState("")
> return (
> <input
> value={content}
> onChange={(e) => {
> setContent(e.target.value.toUpperCase())
> }}
> />
> )
> }
> ```
# 受控组件的问题
每当表单的值发生变化时，都会调用 `onChange ` 事件并重新渲染依赖该状态的整个组件树，导致性能上的损耗