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

写在前面

一直听佬们说受控组件，非受控组件，他们是什么，这两者的区别是什么，本菜鸟准备一探究竟

非受控组件

直接看如何创建该组件

• 通过创建了一个input，不设置value的值，这样input的value由DOM本身控制
• 在需要使用的时候通过dom方法去获取value

import React, { useRef } from "react";

function App() {
    const ipt = useRef()
    const handleSubmit = () => {
        // 在需要的时候进行获取，不能实时获取
        console.log(ipt.current.value);
    }
    return <div className="app">
        <form onSubmit={handleSubmit}>
            <input type="text" ref={ipt}/>
            <input type="submit"/>
        </form>
    </div>;
}

export default App;

受控组件

受控组件需要我们自己传入value，来表示该组件受我们自己控制,不需要通过DOM属性去获取当前值

import React, { useState } from "react";

function App() {
    const [ text, setText ] = useState("");
    const handleChange = (e) => {
        setText(e.target.value.trim())
    };
    return <div className="app">
            <input type="text" onChange={ handleChange }/>
    </div>;
}

export default App;

其中必须传递change方法去修改value，不然react会给出报错

区别

• 非受控组件不需要我们自己定义状态,实现起来稍微简单
• 非受控组件无法实现实时获取当前输入框的内容
• 受控组件需要自己定义状态，并且要实现相关更新的方法
• 受控组件可以控制输入内容的格式
• 受控组件可以根据数据条件来实现禁用等操作
• 当数据由多个控制的时候由于非受控组件无法实时获取，无法实现相关功能

结尾

• 当处理简单的表单数据的时候，可以使用非受控组件
• 当要处理复杂的表单数据的时候，还是老老实实用受控组件