React 的受控组件和非受控组件有什么不同？

大家好，我是前端西瓜哥，今天我们来看看 React 的受控组件和非受控组件有什么不同。

受控组件

受控组件，指的是将表单元素的值交给组件的 state 来保存。

例子：

import './styles.css'
import { useState } from 'react'

const App = () => {
  const [val, setVal] = useState('前端西瓜哥')

  const sumbit = () => {
    // 直接拿组件 state
    const username = val
    // ...
  }

  return (
    <div>
      用户名：
      <input
        value={val}
        onInput={(e) => {
          setVal(e.target.value)
        }}
      />
      ...
    </div>
  )
}

我们用 value prop 控制着 input 元素的值，当发生输入事件时，我们将新值赋值给 val，然后 val 再通过 value 强制更新到 input。

这种写法，可以让 state 一直保持和 input 的内容相同，我们可以直接读取 state，将其传递给其他地方，比如通过 redux 去传递。

缺点是会进行组件的重渲染，一般来说表单元素并不复杂，重渲染成本不高，可以忽略不计。

非受控组件

非受控，就是指状态不由组件的 state 把持，而是让表单元素的内部控制着状态，在我们需要的时候再通过 element.value 的方式取出。

表单元素的初始值通过 defaultValue prop 来设置。

例子：

const App = () => {
  const ref = useRef(null)
  const sumbit = () => {
   	// 通过元素的引用取值
    const username = ref.current?.value
    // ...
  }

  return (
    <div>
      用户名：
      <input ref={ref} defaultValue="前端西瓜哥" />
      ...
    </div>
  )
}

优点是不会更新组件。缺点是不方便实时将值传给其他组件。

另外，它适合一种延迟更新状态的场景。比如输入一些内容，回车后失焦，发现格式不合法，就恢复为上一次的值。

结尾

受控组件和非受控组件，区别在于前者的表单状态由组件 state 控制，后者则是表单元素自己控制，要用时再读元素的值。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。