关于受控组件的思考

最新推荐文章于 2024-07-08 18:16:07 发布
最新推荐文章于 2024-07-08 18:16:07 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： javascript react 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neoveee/article/details/95873911
版权
本文探讨了React中受控组件的设计思想，强调了组件状态由外部管理的优势，包括提高扩展性和灵活性。同时，文章指出了数据层与View层解耦以及UI数据与业务数据分离的重要性，并提供了代码重构的案例，以优化组件状态管理和提高代码质量。
摘要由CSDN通过智能技术生成

最近在团队内部review代码的过程中，引发了关于受控组件设计的一些思考。

关于受控组件，在刚接触React开发的时候，就了解到了这个概念，大体的实现就是给组件提供一个value， 一个onChange，value 用于渲染当前的UI视图，在用户触发操作，

需要更新value的时候，组件调用onChange，由上层组件负责更新状态。整体设计的一个关键点就是：

受控组件内部不维护任何相关的状态，状态都由外部传入
对于状态的更新，提供onChange回调
组件的这种设计方式，对于对接方来说，有付出，也有收益，

付出，就是指顶层组件需要维护相关的状态，并定义状态更新的回调（其实这也算不上付出。。。）

收益，就是指组件的扩展性和灵活性提高了，对于组件来说，我给你什么，你就渲染什么，而且状态由顶层的组件维护，在任何的时刻，都可以监视到

当前的状态，对于一些需要扩展验证规则，以及其他特殊限制的情况，再适合不过。

（最近Beisen开发了一批新的组件，在对接过程中，已经体验过非受控组件的痛苦了）

所以，在提供一些模块，供其他人对接的情况下，尽量将组件设计为受控模式，并统一提供value与onChange回调。

当状态更新时，由组件内部处理状态，并传给onChagne回调。

这种设计，对于一些状态单一的组件来讲，是非常合适的。如果需要提供的是一个比较复杂的组件，有多个状态，比如

最低0.47元/天 解锁文章
neoveee
关注
专栏目录
react基础Day02-受控组件&评论案例&props&context
码化疼
11-28 356
React组件 目标 能够知道受控组件是什么 能够写出受控组件 了解非受控组件 表单处理 受控组件（★★★） HTML中的表单元素是可输入的，也就是有自己的可变状态 而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改 React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值 受控组件：值受到react控制的表单元素 ...
powerdesigner未发现oracle(tm)客户端和网络组件_构建 React 组件的关键概念 / 指南
weixin_39613637的博客
12-19 306
《构建 React 组件的关键概念 / 指南》中的一些概念不仅仅可以应用在 React 组件开发方面，本文更深层次的关注点是 “构建组件的关键概念 / 指南”，只不过本文集中围绕 React 展开。本着开放的态度阅读、琢磨《构建 React 组件的关键概念 / 指南》会更合理。《构建 React 组件的关键概念》额外从《React 哲学》、《React Patterns》提取了些要点。目录创建分析...
受控组件
haohong5515的博客
07-16 726
React.js 认为所有的状态都应该由 React.js 的 state 控制，只要类似于 <input />、<textarea />、<select /> 这样的输入控件被设置了 value值，那么它们的值永远以被设置的值为准。值不变，value 就不会变化 类似于 <input />、<select />、<textare...
React中的受控组件与非受控组件
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-08 1261
在React中，如果一个表单元素的值由其父组件的状态控制，那么这个表单元素就被称为受控组件。这意味着组件的状态直接反映了表单元素的当前值，任何改变都通过事件处理器（如。
React-受控组件
qq_43748856的博客
08-07 214
3、由于在表单元素上设置了value元素，因此显示的值将始终为this.state.value，这使得React的state成为唯一的数据源。4、由于handleUsernameChange在每次按键时都会执行并更新React的state，因此显示的值将随着用户的输入而更新。在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。1、在HTML中，表单元素（如、和）之类的表单元素通常自己维护state，并根据用户输入进行更新。二、受控组件的基本演练。
【React学习】受控组件
zx1041561837的博客
07-26 873
在React框架中，受控组件是一种使用组件的内部状态（state）来管理其值的组件。组件的状态受到React组件生命周期方法和事件处理函数的控制。通过受控组件，父组件可以完全控制子组件的数据流。
web前端高级React - React从入门到进阶之state及组件的生命周期
lixiaosenlin的专栏
01-06 5580
系列文章目录 第一章：React从入门到出门之初识React 第一章：React从入门到出门之JSX简介 第三章：React从入门到出门之元素渲染 第四章：React从入门到出门之JSX虚拟DOM渲染为真实DOM的原理和步骤 第五章：React从入门到出门之组件化开发及Props属性传值 文章目录系列文章目录 持续更新中。。。。。 ...
React-2 -- setState、组件间通信、组件的生命周期
CSDN_GMC的博客
07-13 453
React-21. 上节课重点内容回顾2. 课程目标3. 课程内容3.1 state 和 setState3.2 组件间通信跨组件通信 context - 扩展3.3 组件的生命周期3.3.1生命周期演变1）之前版本（React 16.3 之前）2）现在使用***挂载阶段**更新阶段**卸载阶段**错误处理*3.4 生命周期函数详解3.5 受控组件3.6 todoList 初实现下节课内容 1. 上节课重点内容回顾 JSX 注意事项 必须有,且只有一个顶层的包含元素 - React.Fragment J
全新的 React 组件设计理念 Headless UI
qq_32198115的博客
12-14 1225
Headless UI 是一个组件库设计的新思路，也是未来组件库必然的趋势。对于前端同学而言，学习了解它也显得尤为重要
Naive UI组件库的使用-第一部分
Coffee&Code
06-27 2233
Naive UI 通过使用 n-config-provider 调整主题。默认情况下所有组件均为亮色主题，无需任何配置。如果你想使用暗色主题：那么设置变量theme = darkTheme即可。若theme值为undefined则不影响内部组件主题。<template><app /></script>本篇文章讲述了naive ui在vue3下的安装和配置，及图标xicons的使用，及字体的使用。还有就是全局系统主题的设置，及自定义组件主题的设置方式，还有就编辑器的使用，再有就是国际化的实现。
React 初学 - 受控组件 - 个人笔记29
树上骑个猴的博客
07-22 121
总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。 推荐平时多写受控组件，因为官方也是说尽量少用ref：
何为受控组件(controlled component)
m0_74359467的博客
05-13 387
具体来说，受控组件的值受React状态的控制，也就是说，当用户修改表单元素的值时，React会更新组件的状态，并将其值更新到表单元素中。受控组件通过props传递value或者checked属性来绑定表单元素的值，并通过onChange事件来处理表单元素的变化。这样，父组件可以完全控制子组件的数据流，并在React状态中保存表单数据，从而方便地处理表单验证、提交等操作。简而言之，受控组件是那些表单数据的值由React状态控制，并在状态更新时反映到DOM中的组件。
受控组件与费受控组件
np918的博客
07-23 237
受控组件就是为某个form表单组件添加value属性。 形式如下： render:function(){ return <input type="text" value="Hello!" /> } 添加了value属性的表单组件元素其内部是不会维护自己状态state，组件的value值一旦设置某个具体值就始终是这个值，所以需要调用者来控制组件value的改变。 这种写法会带来...
受控组件和非受控组件
qq_42931285的博客
01-07 707
受控组件和非受控组件
受控组件及非受控组件
weixin_44478972的博客
12-13 140
受控：为了获取到表单元素的值，但不是通过dom操作 (双向数据绑定) import React, { Component } from 'react'; class Forms extends Component { constructor(){ super() this.state = { username:'zhangsan', password:'' } } handleCha
受控组件与非受控组件
04-16
受控组件和非受控组件是在React中常用的两种组件形式，它们主要用于处理表单元素的状态和值。 1. 受控组件： 受控组件是指由React来管理表单元素的状态和值的组件。在受控组件中，表单元素的值由组件的state来控制，并通过onChange事件来更新state的值。当用户输入时，React会更新state的值，并重新渲染组件，从而实现表单元素的交互。 示例代码： ```jsx class ControlledComponent extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> ); } } ``` 2. 非受控组件： 非受控组件是指表单元素的状态和值由DOM自身管理的组件。在非受控组件中，我们可以通过ref属性获取表单元素的值，而不需要通过state来管理。这种方式适用于简单的表单场景，但不适用于需要对表单值进行复杂操作或验证的情况。 示例代码： ```jsx class UncontrolledComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit(event) { event.preventDefault(); console.log(this.inputRef.current.value); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <input type="text" ref={this.inputRef} /> <button type="submit">Submit</button> </form> ); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值