浅析React中的受控组件和非受控组件
非受控组件
表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）
1.非受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
myRef1 = React.createRef();
myRef2 = React.createRef();
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const username = this.myRef1.current
const password = this.myRef2.current
alert(`您输入的用户名是:${username.value},您输入的密码是：${password.value}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用户名：<input ref={this.myRef1} type="text"/>
密码：<input ref={this.myRef2} type="text"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
受控组件
在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
2.受控组件 （受到控制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 保存用户名到状态中
saveUsername = (e) => {
this.setState({username: e.target.value})
}
// 保存密码到状态中
savePassword = (e) => {
this.setState({password: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault() // 阻止表单提交
const {username,password} = this.state
alert(`您输入的用户名是:${username},您输入的密码是：${password}`)
}
render() {
// onChange是一有变化就改变
return (
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text"/>
密码：<input onChange={this.savePassword} type="text"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
注意
一般情况，受控组件用的多，因为在非受控组件中会多次使用ref，而官方文档上有些“请勿过度使用ref”，使用次数多了会存在效率上的问题。
结论
受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件。
| 特征 | 非受控制 | 受控 |
| 一次性检索（例如表单提交） | yes | yes |
| 及时验证 | no | yes |
| 有条件的禁用提交按钮 | no | yes |
| 执行输入格式 | no | yes |
| 一个数据的几个输入 | no | yes |
| 动态输入 | no | yes |
以上就是浅析React中的受控组件和非受控组件的详细内容，更多关于react受控组件和非受控组件的资料请关注我们其它相关文章！
相关推荐
-
React学习之受控组件与数据共享实例分析
本文实例讲述了React学习之受控组件与数据共享.分享给大家供大家参考,具体如下: 在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会自己储存值,并且根据用户输入进行更新.但在React中,可变的值通常保存在组件的state中,并且只能用 setState() 方法进行更新.为了解决二者的矛盾,可以让HTML元素不再自己储存数据,而使用来自于react的state.也就是说HTML元素把数据保存在react组件的state中,并
-
React 使用Hooks简化受控组件的状态绑定
开始之前 阅读本文需要对以下几项有一定了解 ECMAScript 6 文章中大量用到了 ES6 语法,比如解构赋值和函数参数默认值.剩余参数.展开语法.箭头函数等. Hooks React 在 16.8 版本中推出了 Hooks,它允许你在"函数组件"中使用"类组件"的一些特性. React 本身提供了一些 Hooks,比如 useState.useReducer 等.通过在一个以"use"作为命名起始的函数中调用这些 Hooks,就得到了一个
-
浅谈react受控组件与非受控组件(小结)
我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器.这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值.但是,因为React是单向数据流绑定的,这些组件可能会变得失控: 1.一个维护它自己state里的value值的<Input>组件无法从外部被修改: 2.一个通过props来设置value值的<Input>组件只能通过外部
-
浅谈React深度编程之受控组件与非受控组件
受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意.这恰恰显示React的威力,满足不同规模大小的工程需求.譬如你只是做ListView这样简单的数据显示,将数据拍出来,那么for循坏与 {} 就足够了,但后台系统存在大量报表,不同的表单联动,缺了受控组件真的不行. 受控组件与非受控组件是React处理表单的入口.从React的思路来讲,作者肯定让数据控制一切,或者简单的理解为,页面的生成与更新得忠实地执行JSX的指令. 但是表单元素有其特殊之处,用户可以通过键盘
-
浅析React中的受控组件和非受控组件
非受控组件 表单数据由DOM本身处理.即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值) 1.非受控组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g
-
React受控组件与非受控组件详细介绍
目录 1. 受控组件 1.1 介绍 1.2 受控组件简写 1.3 在表单中使用受控组件 1.4 综合案例 2. 非受控组件介绍 非受控组件的应用 1. 受控组件 1.1 介绍 概述: 将 state 与表单项中的 value 值绑定在一起,有 state 的值来控制表单元素的值,称为受控组件. 绑定步骤: 在state中添加一个状态,作为表单元素的value值 给表单元素绑定 change 事件,将表单元素的值设置为 state 的值 语法: # value={this.state.xx} 事件
-
深入浅析React中diff算法
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,
-
浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
-
vue2.0父子组件及非父子组件之间的通信方法
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr
-
Vue 中的受控与非受控组件的实现
受控组件 什么是受控组件? 其值由React控制的输入表单元素称为"受控组件". 受控组件有两个特点:1. 设置value值,value由state控制,2. value值一般在onChange事件中通过setState进行修改 什么时候使用受控组件? 需要对组件的value值进行修改时,使用受控组件.比如:页面中有一个按钮,每点击一次按钮受控组件的值加1. 非受控组件 什么是非受控组件? 表单数据由 DOM 处理的组件非受控组件. 非受控组件有两个特点:1. 不设置value值,2.
-
详解React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传
-
react中的DOM操作实现
目录 前面的话 使用场景 ref [HTML元素] [类组件] [函数式组件] [对父组件暴露DOM节点] 非受控组件 [默认值] ReactDOM [render()] [unmountComponentAtNode()] [findDOMNode()] 新ref 前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 1.处理焦点.文本选择或媒体控制