React受控组件和非受控组件对比详解_Javascript

引言

在使用react搭建用户界面时，组件可以分为两类：受控组件（controlled components）和非受控组件（uncontrolled components）。这两种组件在数据处理方式上有着显著的差异，理解它们的区别对于构建高效和可控的react应用至关重要。本文将深入探讨这两种组件的定义、特点以及使用场景，并通过示例代码帮助你更加清晰地理解它们。

受控组件（controlled components）

受控组件是指将表单数据的状态完全由react组件内部的state管理的组件。在受控组件中，表单的值（如 <input> 组件中的内容）总是由react的状态来控制。当用户输入时，react会通过事件处理函数来更新组件的状态，从而驱动界面的渲染。

优点

可预测性：因为组件的状态总是由react管理，所以数据的流动清晰明确，便于调试和维护。
单向数据流：在react中，数据只从父组件流向子组件，从而保证了组件的数据流动是单向的，有利于创建可重用的组件。
联动性：多个表单控件之间的状态变化可以很容易地联动，例如在表单中一个输入框的值改变可能影响其他输入框的值。

示例代码

下面是一个简单的受控组件示例，其中我们创建一个表单，并让用户输入他们的姓名。

import react, { usestate } from 'react';

function controlledcomponent() {
  const [name, setname] = usestate('');

  const handlechange = (event) => {
    setname(event.target.value);
  };

  const handlesubmit = (event) => {
    event.preventdefault();
    alert(`welcome, ${name}!`);
  };

  return (
    <form onsubmit={handlesubmit}>
      <label>
        name:
        <input type="text" value={name} onchange={handlechange} />
      </label>
      <button type="submit">submit</button>
    </form>
  );
}

export default controlledcomponent;

在这个示例中，我们创建了一个受控组件 controlledcomponent。用户在输入框中输入时，handlechange 方法会被调用，将输入值存储在组件的状态中。每次状态变化都会导致组件重新渲染，从而让输入框始终显示最新的值。

非受控组件（uncontrolled components）

非受控组件则是更加传统的表单处理方式。此时，表单数据的状态并不由react来管理，而是让浏览器自行处理。我们可以通过使用 ref 来直接访问dom元素及其值，从而在需要时获取输入的数据。

优点

简单：对于一些简单的输入，使用非受控组件可以减少代码的复杂性和冗余性。
直接操作：直接与dom交互的方式可能在一些情况下更有效率，特别是在处理大量的动态内容时。

示例代码

以下是一个非受控组件的示例：

import react, { createref } from 'react';

class uncontrolledcomponent extends react.component {
  constructor(props) {
    super(props);
    this.inputref = createref();
  }

  handlesubmit = (event) => {
    event.preventdefault();
    alert(`welcome, ${this.inputref.current.value}!`);
  };

  render() {
    return (
      <form onsubmit={this.handlesubmit}>
        <label>
          name:
          <input type="text" ref={this.inputref} />
        </label>
        <button type="submit">submit</button>
      </form>
    );
  }
}

export default uncontrolledcomponent;

在这个例子中，我们创建了一个类组件 uncontrolledcomponent，并使用 createref 创建了一个引用 inputref。当用户提交表单时，我们通过 this.inputref.current.value 获取输入框的值，而不是通过状态来管理。

受控组件与非受控组件的对比

特点	受控组件	非受控组件
数据源	react的state	dom的真实值
事件处理	依赖于事件处理函数	直接通过refs访问
界面更新	状态更新会重新渲染组件	不会自动重新渲染组件
适用性	适用于需要实时反馈和数据管理的表单	适用于简单场景

何时使用受控组件和非受控组件？

选择使用受控组件还是非受控组件，主要取决于你的需求和场景。

使用受控组件：当你需要能够在用户输入时立即对数据进行验证或处理时，一般建议使用受控组件。这种方法提供了更好的数据管理体验，并且让你可以轻松实现复杂的用户交互。
使用非受控组件：如果你只需要简单的输入，且不希望为每个输入保持状态，这种情况下使用非受控组件会让你的代码更简洁。而且在某些性能敏感的场合，直接与dom交互的方式也往往具有更高的效率。