面试题：React中受控组件和非受控组件在表单处理上的主要区别

Question

请详细阐述React中受控组件和非受控组件在处理表单输入时的主要区别，包括数据的存储、更新方式以及适用场景，并分别给出一个简单的代码示例。

Answer 1

受控组件

1. 数据存储：数据存储在组件的 state 中。
2. 更新方式：通过 onChange 事件监听输入变化，并使用 setState 方法更新 state，从而触发组件重新渲染，保持表单输入值与 state 的同步。
3. 适用场景：适用于需要实时验证、实时处理输入数据、对表单输入进行精细控制的场景，例如登录表单、注册表单等。

代码示例：

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <p>输入的值为: {inputValue}</p>
    </div>
  );
};

export default ControlledComponent;

非受控组件

1. 数据存储：数据直接存储在DOM元素中，React 只在组件挂载和卸载时与DOM交互。
2. 更新方式：通过 ref 获取DOM元素的值，通常在提交表单或特定操作时才读取DOM的值，而不是实时更新。
3. 适用场景：适用于不需要实时监听输入变化，只在特定时刻获取表单值的场景，例如文件上传组件、一些简单的一次性表单。

代码示例：

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const value = inputRef.current.value;
    console.log('输入的值为: ', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={inputRef}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default UncontrolledComponent;