文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

react非受控组件指的是什么

2024-04-02 19:55

关注

这篇文章主要介绍“react非受控组件指的是什么”,在日常操作中,相信很多人在react非受控组件指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react非受控组件指的是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在react中,非受控组件是不被父组件控制的组件;非受控组件也就是一个独立组件,不需要传值也没有任何与当前组件的父组件有所交集,在封装组件时,只有在当前组件只做展示用途且没有任何不同的时候才会封装为非受控组件。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react非受控组件是什么意思

什么叫非受控组件

我们从两个字入手,那就是组件,受控与非受控是从组件的角度出发来说出的概念,字面意思就是组件时不被控制的,不被谁控制,当然是不被父组件控制,那么不受控制的组件有什么特性,就是一切逻辑只与自身有关,与其他的组件没有通信与交集

在HTML当中,像,, 和 这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,这些组件在不加以处理的情况下都是非受控组件,因为你真正使用的时候会发现这些组件是不会自动更新值的,我们输入的值在不做任何处理的情况是无法拿到使用输入的值的

举例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))

非受控组件的解释

既然非受控组件是一个与外界无任何交集的组件,那么我们是不是就用不到非受控组件了,答案是否定的,我们在特定的情况下其实是用得到非受控组件的

轮播组件(非受控),想想一下如果我们页面需要一个轮播组件,且组件只使用一次不打算复用,我们把轮播的代码放到一个轮播组件中,轮播组件是否需要与外界做交互,不需要,那么我们写出来的一个不管当前轮播图如何运行,包括点击事件包括轮播的时间等条件都是写死的时候,那轮播组件就是一个非受控组件了,当然了这个例子举得有些牵强,我们在做组件的时候一定是想要一个通用的且可复用的组件的,需要得知轮播当前状态,那么就导致我们非受控组件不再适用

静态页面开发.在静态页面的开发的时候,我们通常不使用框架,只用html单独写出文件,打包后性能可能更佳,但是如果我们项目中某一个页面是静态页面,我们是否就用到了我们的非受控组件,展示的页面即没有封装性,也只能是定制性的页面,那我们的页面组件单独存在的时候,也就是非受控组件了

非受控组件也就是一个独立组件,不需要传值也无任何与当前组件的父组件有所交集,在我们封装组件的时候,只有在当前组件只做展示用途且无任何不同的时候才会封装为非受控组件

扩展知识:

什么叫受控组件

这个我们就与非受控组件时相反的,从字面意思就是受辖制,受父级组件所管制的组件,就叫做受控组件

父组件如何对子组件进行控制,当然是通过传值进行管控,props传值被子组件所使用,且子组件的内容或方法或展示结果因父组件的传值而更改的时候,子组件就是一个受父组件管控的受控组件

举例

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value='123' />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

我们不要把input看作input组件,我们要把input看作任何一个我们引用或者自己封装的组件当这个组件被我们传值之后,哪怕是被我们传的固定的字符串,本质上来讲依旧是受控组件,受控组件不是看有没有数据双向绑定,而是看本质上有没有受控,当我们传递一个固定值的时候,input组件的值就固定了,无法修改,虽然我们传递了props时写死的值,但是这个值依旧是把input组件进行了控制

受控组件的解释

受控组件实际上是出现在我们编程的方方面面的,我们单独拿出来的任何一个组件,大概率都是受控组件,毕竟静态页面需求还是较少的,我们js大部分时候都是处理逻辑的,那逻辑必然是要有交互的

举例就是如上inpu组件代码,等同与textarea和select组件,我们都是要通过一些参数(props)传递去告知组件的具体渲染规则和展示内容的,比如type属性也是我们进行组件受控的一种

数据的双向绑定:其实在我们传递给value任意一个值或者属性的时候,就已经把组件的意义变成了受控组件,但是我们绑定onChange的时候,通过onChange给到我们组件一个数据改变时的回调方法,在回调方法中我们通过setState进行数据的更改,从而进行render的重新渲染,这就是数据的双向绑定了,数据驱动视图,视图驱动数据嘛

总结:受控组件与非受控组件就是一个概念,表明当前的组件是否受控,是否是一个单独的与其他内容都无任何交互的组件,简单来说,完全独立的一个组件,就可以看作一个非受控组件,其他的都时受控组件

到此,关于“react非受控组件指的是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯