前端React篇之React中什么是受控组件和非控组件？

React中什么是受控组件和非控组件？

在React中，受控组件和非受控组件是两种表单元素的状态管理方式。

受控组件

受控组件（Controlled Component）是指其值由React组件的state来控制的表单元素。当用户输入时，值被React state所管理，并且通过onChange事件处理函数来更新state。这意味着组件渲染出的状态与其value或checked属性相对应。React通过这种方式消除了组件的局部状态，使整个状态可控。React官方推荐使用受控表单组件。

受控组件的值在React的状态中定义，并通过事件处理程序进行更新。每当表单元素的值发生变化时，React会更新组件的状态，并且在必要时重新渲染组件。这种机制使得我们可以对用户输入进行验证、控制和处理。

更新state的流程：

• 可以通过初始state设置表单的默认值
• 每当表单的值发生变化时，调用onChange事件处理器
• 事件处理器通过事件对象e获取改变后的状态，并更新组件的state
• 一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

缺陷：
如果有多个输入框或多个这种组件时，必须为每个编写事件处理函数，让代码看起来臃肿。为了解决这种情况，出现了非受控组件。

在实际工作项目中，我们通常需要对用户的输入进行验证和处理。例如，表单中包含一个文本输入框，我们需要在用户输入后对其进行验证，并在验证通过后执行相应的逻辑操作。

假设我们有一个登录表单，其中包含用户名和密码输入框。我们希望对用户输入进行验证，并在验证通过后执行登录逻辑。

import React, { useState } from 'react'

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

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

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

  const handleSubmit = event => {
    event.preventDefault()
    // 进行用户名和密码的验证和处理逻辑
    if (username === 'admin' && password === 'password') {
      console.log('登录成功')
    } else {
      console.log('用户名或密码错误')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={handleUsernameChange} placeholder="Username" />
      <input type="password" value={password} onChange={handlePasswordChange} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  )
}

在上述代码中，我们使用useState来定义了username和password两个状态变量，并提供了对应的set方法。输入框的值分别通过value属性绑定到对应的状态变量上，并通过onChange事件处理程序来更新状态变量的值。

• 受控组件需要定义状态变量和对应的事件处理程序来处理和更新表单元素的值。
• 每当表单元素的值发生变化时，React会自动更新组件的状态并重新渲染组件。
• 通过直接修改状态变量的值来更新表单元素的值是不可行的，必须使用对应的事件处理程序进行更新。

在React中，受控组件通过组件的状态变量来控制和更新表单元素的值。通过绑定状态变量和事件处理程序，以及使用value属性来与状态变量进行双向绑定，React能够完全控制表单元素的状态和行为。受控组件适用于需要对用户输入进行验证、控制和处理的场景。

非受控组件

在React中，非控组件（Uncontrolled Component）是指不受React控制的表单元素，其值由DOM元素自身维护和管理。

非控组件中，表单元素的值由DOM元素直接管理，React对其值没有任何控制权。我们通过使用ref来获取DOM元素的值，而不是通过状态（state）来管理和更新。

React官方解释：
要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用ref来从DOM节点中获取表单数据。因为非受控组件将真实数据储存在DOM节点中，所以在使用非受控组件时，有时候更容易同时集成React和非React代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少代码量。否则，你应该使用受控组件。

在实际工作项目中，我们通常需要处理一些不需要对表单元素的值进行实时操作或验证的情况。例如，只是在表单提交时获取表单的最终值用于处理或发送给后端。

假设我们有一个搜索表单，用户输入关键字后点击搜索按钮进行搜索操作。我们只需要在点击按钮时获取输入框的值，并进行相应的搜索逻辑。

import React, { useRef } from 'react'

const SearchForm = () => {
  const inputRef = useRef()

  const handleSubmit = event => {
    event.preventDefault()
    const keyword = inputRef.current.value
    // 执行搜索逻辑
    console.log('搜索关键字:', keyword)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="请输入关键字" />
      <button type="submit">搜索</button>
    </form>
  )
}

在上述代码中，我们使用了React的useRef钩子函数来创建一个inputRef引用。该引用与input元素建立了关联。当表单提交时，我们通过inputRef.current.value来获取input元素的值，并执行相应的搜索逻辑。

• 非控组件中，我们使用ref来获取表单元素的值，而不是依赖组件的状态。
• 非控组件的值由DOM元素自身管理，React无法控制它的更新。因此，在非控组件中无法对表单值进行验证或对输入进行实时控制。
• 非控组件适用于不需要实时处理或验证表单值的场景，例如只需要在提交表单时获取最终的值并进行处理。

在React中，非控组件（Uncontrolled Component）是指由DOM元素自身管理和维护其值的表单元素。与受控组件不同，React不控制非控组件的值，也不存储或更新它们。相反，我们可以使用引用（ref）来获取表单元素的值，然后在需要的时候进行处理。

非控组件的值由DOM元素自身维护，React并不直接控制它们。我们可以通过创建一个引用（ref）并将其绑定到DOM元素上，然后通过引用来获取和处理元素的值。这种方式脱离了React的状态管理，更加直接地操作DOM元素。

在实际工作项目中，非控组件适用于那些不需要对表单元素值进行直接处理的场景。例如，当我们只需要在提交表单时获取表单元素的值，而不需要对其进行验证或处理时，可以使用非控组件。

假设我们有一个简单的表单，包含一个输入框和一个提交按钮。我们只需要在点击提交按钮时获取输入框的值，而不需要对输入值进行验证或处理。

import React, { useRef } from 'react'

const MyForm = () => {
  const inputRef = useRef(null)

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

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

在上述代码中，我们使用了useRef来创建一个引用（ref），并将其绑定到输入框的ref属性上。在表单提交时，通过读取inputRef.current.value来获取输入框的值，并在控制台打印出来。

• 非控组件通过直接操作DOM元素来管理和获取表单元素的值，不依赖React的状态管理。
• 在使用非控组件时，我们需要使用ref来获取在React中，非控组件（Uncontrolled Component）是指由DOM直接管理和控制其值的表单元素。React不会跟踪和管理这些表单元素的值，而是通过访问DOM来获取和处理它们的值。

非控组件的值由DOM元素自身维护，而不是由React的状态管理。我们可以使用ref来获取表单元素的引用，并直接访问和处理表单元素的值。

在实际工作项目中，非控组件适用于不需要对表单元素的值进行直接处理的情况。例如，只需要在某个事件中获取表单的最终值，然后进行提交或处理。

假设我们有一个表单，其中包含一个输入框，我们需要获取用户输入的值并进行一些处理。

import React, { useRef } from 'react'

const MyForm = () => {
  const inputRef = useRef(null)

  const handleSubmit = event => {
    event.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 MyForm

在上述代码中，我们使用useRef来创建一个引用（ref），并将其绑定到输入框元素上。当表单提交时，我们可以通过引用访问输入框的值，并在事件处理程序中进行处理。

• 非控组件不受React的状态管理，不会自动更新组件的状态或进行重渲染。
• 非控组件更接近于传统的DOM操作，可以直接访问元素的值。
• 在使用非控组件时，要确保正确处理表单元素值的逻辑，并确保通过其他方式（如ref）来获取表单元素的引用。
• 尽量在必要时使用非控组件，因为受控组件提供了更直观和可预测的状态管理方式

总结：
页面中所有输入类的DOM如果是现用现取的称为非受控组件，而通过setState将输入的值维护到了state中，需要时再从state中取出，这里的数据就受到了state的控制，称为受控组件。

在React中，受控组件和非受控组件是表单元素的两种状态管理方式。选择何种方式通常取决于具体情况和个人偏好。

持续学习总结记录中，回顾一下上面的内容：
在React中，受控组件和非控组件是用于处理表单元素的两种不同的方式。
受控组件（Controlled Component）是指通过React的状态（state）来控制表单元素的值和状态。我们将表单元素的值存储在组件的状态中，并通过事件处理程序来更新状态。这种方式使得React具有对表单值的完全控制权，可以实时验证、处理和响应表单的变化。
非控组件（Uncontrolled Component）是指表单元素的值由DOM元素自身管理，React对其值没有控制权。我们通过使用ref来获取DOM元素的值，而不是依赖React的状态管理。非控组件更接近于传统的DOM操作，对表单值的控制权交给了DOM元素本身。
受控组件通过React的状态管理表单元素的值和状态，具有实时验证、处理和响应变化的能力。非控组件中，表单元素的值由DOM元素自身管理，React无法控制它们的更新。使用ref来获取和处理表单元素的值。根据具体需求选择适合的方式，受控组件提供了更高程度的控制和可预测性，而非控组件更直接地操作DOM元素。