聊一聊React中的受控组件和非受控组件

卷帘依旧
5,842 阅读3分钟

React中的组件分为将状态变化交由React处理的组件和通过ref引用获取的组件两种，前者称为受控组件，后者称为非受控组件，非受控组件的状态在组件自身存储，需要的时候通过ref查询DOM并查找其值。

前言

React中的组件根据是否受React控制可分为受控的(controlled)和非受控的(uncontrolled)。

多数情况下，推荐使用受控组件实现表单。在受控组件中，表单数据由组件控制。

另外一种是非受控组件，这种方式下表单组件由DOM自身控制。

接下来我们分别看一下这两种组件的实现。

image.png

受控组件

  1. 受控组件通过props获取其当前值，并通过回调函数(比如onChange)通知变化
  2. 表单状态发生变化时，都会通知React，将状态交给React进行处理，比如可以使用useState存储
  3. 受控组件中，组件渲染出的状态与它的value或checked属性相对应
  4. 受控组件会更新state的流程

🌰一个简单的例子：

export default function App() {
    const [name, setName] = useState('');
  
    const handleNameChange = e => {
      setName(e.target.value);
    }
  
    return (
      <div className="App">
        <div>hello {name}</div>
        姓名：<Input onChange={handleNameChange} />
      </div>
    );
  }

受控组件-示例代码

代码中有一个输入框，界面展示了输入框的内容，随着输入框内容的变化，上方文字相应变化。

  • 表单组件Input的值通过onChange回调交给React处理
  • React获取到表单的值(e.target.value)之后，将其保存到了状态变量name中
  • 界面展示内容通过读取组件状态name，因此name的变化触发<div>hello {name}</div>的重新渲染

非受控组件

非受控组件将数据存储在DOM中，而不是组件内，这比较类似于传统的HTML表单元素。

  1. 非受控组件的值不受组件自身的state和props控制
  2. 非受控组件使用ref从DOM中获取元素数据
export default function App() {
    const eleRef = useRef(null);
    const [submitContent, setSubmitContent] = useState("");
  
    const handleSubmit = () => {
      // 通过ref获取输入框的值
      const content = eleRef.current?.value;
      setSubmitContent(content);
    };
  
    return (
      <div className="App">
        <input ref={eleRef} />
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
        <div>{submitContent ?? ""}</div>
      </div>
    );
  }

非受控组件-示例代码

页面中包含一个输入框、一个按钮，通过ref获取到输入框的引用，在改变输入内容之后，点击提交，页面会展示输入框内容。

  • React通过ref获取input元素的值
  • input值由用户改变，点击提交按钮，在handleSubmit中通过ref获取DOM元素，进而读取输入框的值
  • 输入框的变化并未交由组件控制，而是通过ref获取，也就是直接在DOM中读取

总结

  1. React中的组件分为受控组件和非受控组件
  2. 受控组件的两个要点：
    • 组件的value属性与React中的状态绑定
    • 组件内声明了onChange事件处理value的变化
  3. 非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用
  4. 一些建议：
    • 尽可能使用受控组件
    • 受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素
    • 对于有大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智
    • 在受控组件中，数据流是单向的(state是变化来源)，因此在改变state时都应该使用setState，而不要强制赋值
    • Refs不能用于函数式组件，因为函数式组件没有实例
    • 在函数式组件内部，是可以使用Refs的

参考链接

受控组件与非受控组件

What are React controlled components and uncontrolled components?

Controlled vs Uncontrolled Components in React

React Controlled Components, the Hooks Way

avatar
文章
阅读
粉丝