React：谈谈对受控组件和非受控组件的理解？应用场景？

answer

受控组件（Controlled Components）

在函数组件中，我们使用useState钩子来管理表单元素的状态，并通过onChange事件处理器来更新状态。

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted value: ' + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

非受控组件（Uncontrolled Components）

在函数组件中，我们使用useRef钩子来访问DOM元素，获取或设置表单元素的值。

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted value: ' + inputRef.current.value);
  };

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

export default UncontrolledForm;

受控组件和非受控组件的应用场景

受控组件的应用场景

受控组件适用于需要对输入进行即时验证、格式化处理和在输入过程中与其他组件进行交互的场景。例如，实时表单验证、条件渲染、以及复杂表单数据处理。

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!username || !password) {
      setError('Username and password are required');
    } else {
      setError('');
      // Handle form submission
      alert(`Username: ${username}, Password: ${password}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Username:
          <input
            type="text"
            value={username}
            onChange={handleUsernameChange}
          />
        </label>
      </div>
      <div>
        <label>
          Password:
          <input
            type="password"
            value={password}
            onChange={handlePasswordChange}
          />
        </label>
      </div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

非受控组件的应用场景

非受控组件适用于简单的表单输入，不需要对输入进行复杂处理的场景。例如，只有几个输入框的简单表单，或与需要直接操作DOM的第三方库集成的情况。

import React, { useRef } from 'react';

const SimpleForm = () => {
  const usernameRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Username: ${usernameRef.current.value}, Password: ${passwordRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Username:
          <input
            type="text"
            ref={usernameRef}
          />
        </label>
      </div>
      <div>
        <label>
          Password:
          <input
            type="password"
            ref={passwordRef}
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

总结

• 受控组件适用于需要对输入进行即时验证和处理的复杂表单。
• 非受控组件适用于简单表单或需要直接操作DOM的场景。

选择使用受控组件或非受控组件，取决于具体需求和表单的复杂程度。在实际开发中，灵活运用这两种方式，可以有效提高开发效率和代码的可维护性。