React 中受控组件和非受控组件的区别

简介: 【8月更文挑战第31天】

在 React 中,表单输入元素可以分为两类:受控组件和非受控组件。理解这两种组件之间的区别对于构建健壮且可维护的 React 应用程序至关重要。

受控组件

受控组件是其值由 React 状态管理的表单输入元素。这意味着 React 组件存储输入元素的值,并在用户输入时更新该值。

创建受控组件

要创建受控组件,需要使用 useState 钩子或 this.state(对于类组件)来管理输入元素的值。然后,将该值传递给 value 属性,如下所示:

import {
    useState } from "react";

const MyInput = () => {
   
  const [value, setValue] = useState("");

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

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

非受控组件

非受控组件是其值由 DOM 管理的表单输入元素。这意味着 React 组件不存储输入元素的值,并且在用户输入时不会更新该值。

创建非受控组件

要创建非受控组件,只需将 value 属性省略,如下所示:

const MyInput = () => {
   
  return <input />;
};

受控组件与非受控组件的区别

下表总结了受控组件和非受控组件之间的主要区别:

特性 受控组件 非受控组件
值管理 由 React 状态管理 由 DOM 管理
更新机制 在用户输入时由 React 更新 在用户提交表单时由 DOM 更新
双向绑定
表单提交 需要手动处理表单提交 自动处理表单提交
可控性 组件控制输入元素的值 组件不控制输入元素的值
用例 当需要在组件中控制和更新输入元素的值时 当输入元素的值不需要由组件管理时

何时使用受控组件?

建议在以下情况下使用受控组件:

  • 当需要在组件中控制和更新输入元素的值时
  • 当需要对输入进行实时验证时
  • 当需要处理复杂表单逻辑时

何时使用非受控组件?

建议在以下情况下使用非受控组件:

  • 当输入元素的值不需要由组件管理时
  • 当输入只用于提交到服务器时
  • 当表单非常简单时

结论

了解受控组件和非受控组件之间的区别对于构建健壮且可维护的 React 应用程序至关重要。通过选择正确的组件类型,开发人员可以优化应用程序的性能、可读性和可维护性。

目录
相关文章
|
14天前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
36 2
react对antd中Select组件二次封装
|
14天前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
24 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
14天前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
31 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
10天前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
13 2
|
15天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
14天前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
16 2
|
17天前
|
JavaScript 前端开发 算法
vue和react的区别是什么?
vue和react的区别是什么?
|
14天前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件,类似于类组件的`PureComponent`,用于避免不必要的渲染。`useCallback` Hook 用于缓存函数,避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数,以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果,避免重复计算。两者都可以用来优化性能,但适用场景不同:`memo`用于组件,`useMemo`和`useCallback`用于值和函数的缓存。
42 1
|
20天前
|
前端开发 JavaScript
react学习(21)受控组件
react学习(21)受控组件
|
13天前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
40 0

热门文章

最新文章