对受控组件和非受控组件的理解，以及应用场景？

2024-06-30 16:36:42

一、受控组件

受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据

举个简单的例子：

class TestComponent extends React.Component {constructor (props) {super(props);this.state = { username: 'lindaidai' };}render () {return <input name="username" value={this.state.username} />}
}

这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态

这是因为value被this.state.username所控制住。当用户输入新的内容时，this.state.username并不会自动更新，这样的话input内的内容也就不会变了

如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变

因此，受控组件我们一般需要初始状态和一个状态更新事件函数

二、非受控组件

非受控组件，简单来讲，就是不受我们控制的组件

一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态

当需要时，可以使用ref 查询 DOM 并查找其当前值，如下：

import React, { Component } from 'react';export class UnControll extends Component {constructor (props) {super(props);this.inputRef = React.createRef();}handleSubmit = (e) => {console.log('我们可以获得input内的值为', this.inputRef.current.value);e.preventDefault();}render () {return (<form onSubmit={e => this.handleSubmit(e)}><input defaultValue="lindaidai" ref={this.inputRef} /><input type="submit" value="提交" /></form>)}
}

三、应用场景

大部分时候推荐使用受控组件来实现表单，因为在受控组件中，表单数据由React组件负责处理

如果选择非受控组件的话，控制能力较弱，表单数据就由DOM本身处理，但更加方便快捷，代码量少

针对两者的区别，其应用场景如下图所示：

对受控组件和非受控组件的理解，以及应用场景？相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
React-表单处理（受控组件，非受控组件）
受控组件: value值受到了react状态控制的表单元素 React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值非受控组件: 非受控组件借助于re ...
React---什么是受控组件、非受控组件
受控组件: 在随后的用户输入中,能够控制表单中输入元素的组件被称为受控组件,即每个状态更改都有一个相关联的处理程序. 例如,我们使用下面的 handleChange 函数将输入框的值转换成大写: ha ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
【REACT-受控组件和非受控组件】
REACT-受控组件和非受控组件概述受控组件非受控组件受控组件应用ToDoList 概述 React中的组件根据是否受React控制可分为受控的和非受控的. React 中的受控组件和非受控组 ...
React的受控组件和非受控组件
一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...

最新文章

热门文章