React 受控组件与非受控组件

[myLightLin]

组件是否”受控“，决定了它是否有管理自身数据的能力。而受控与非受控，则是 React 组织代码的一种形式。

受控组件

受控组件的核心是把组件的状态管理交给React来做，这也是在开发组件时的推荐用法。让我们来看下面这段代码：

import React, { useState } from "react"

function Input() {
  const [value, setValue] = useState('')
  
  const handleChange = (event) => {
     setValue(event.target.value)
  }
 
  return (
    <>
      <input type="text" value={value} onChange={handleChange} />
    </>
  )
}

上面的这个 Input 组件就是一个典型的受控组件，输入框的值是由 React 的 useState 管理的，并且当输入变化时，也就是由 React 来 setValue 触发更新渲染。这种模式的优点就是子组件的状态通常交由父组件管理，数据从高层向底层流动，贴合 React 的设计哲学，也就是组件数据源是单一的、可预测的。

非受控组件

与受控组件相反，非受控组件的数据源，通常采用接近原生 DOM 的获取方式。也就是说，利用一个 ref 挂载在组件上，然后通过 DOM 属性直接获取到元素的值，来看下面这段组件代码：

import React, {useRef} from "react"

function Input() {
  const inputRef = useRef(null)
  
  const getInputValue = () => {
    console.log('value: ', inputRef.current.value)
  }
 
  return (
    <>
      <input type="text" ref={inputRef} />
    </>
  )
}

非受控组件的特点是，获取状态简单直接，通过 DOM 节点引用直接拿，并且由于 ref 是在整个组件生命周期内存在的，可以减少应状态变化而导致的多余渲染次数。