React学习笔记——受控组件和非受控组件以及ref

前端

2023-11-30 19:42:06

React 中的受控与非受控组件：全方位指南

前言

在 React 生态系统中，组件的状态管理至关重要。了解受控和非受控组件之间的区别对于编写高效且易于维护的 React 应用程序至关重要。本文深入探讨这两个概念，涵盖它们的优缺点，使用场景以及 ref 在 React 中的作用。

受控组件

受控组件是 React 管理其内部状态的组件。这意味着 React 跟踪组件的输入值，当用户与其交互时更新这些值。受控组件的输入值通常存储在组件的状态对象中。

优点：

易于管理： React 负责维护状态，简化了组件状态的管理。
更易于测试： 由于状态存储在组件内部，测试受控组件的行为变得更加简单。
性能更好： React 可以有效地更新受控组件的状态，从而提高整体性能。

缺点：

灵活性受限： React 控制组件状态，这可能会限制组件的灵活性，使其更难集成外部状态管理库。
实现复杂： 创建受控组件通常需要在组件中定义和维护状态，这可能会增加实现的复杂性。

代码示例：

import React, { useState } from "react";

const ControlledInput = () => {
  const [inputValue, setInputValue] = useState("");

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

  return <input value={inputValue} onChange={handleChange} />;
};

非受控组件

非受控组件是 React 不管理其内部状态的组件。这意味着组件的输入值由外部源管理，例如父组件或 Redux 状态管理库。非受控组件的输入值通常存储在组件的 props 中。

优点：

灵活性高： 非受控组件的灵活性更高，可以轻松地与外部状态管理库集成。
实现简单： 创建非受控组件通常不需要在组件中定义和维护状态，这简化了实现。

缺点：

难以管理： 外部源管理状态可能难以管理，尤其是对于大型或复杂的组件树。
难以测试： 由于状态存储在外部，测试非受控组件的行为可能具有挑战性。
性能较差： React 无法有效地管理非受控组件的状态，这可能会降低整体性能。

代码示例：

import React from "react";

const UncontrolledInput = (props) => {
  return <input value={props.value} onChange={props.onChange} />;
};

ref 在 React 中的作用

ref 是 React 中的一个特殊属性，它允许组件访问 DOM 元素或组件实例。通过回调函数，可以获取对 DOM 元素或组件实例的引用。ref 在管理表单、动画和与外部库集成方面非常有用。

使用 ref：

import React, { useRef } from "react";

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

  useEffect(() => {
    const inputElement = inputRef.current;
    // 对 inputElement 进行操作
  }, []);

  return <input ref={inputRef} />;
};