位置: IT常识 - 正文

【React】组件三大核心属性(react组件框架)

编辑:rootadmin
【React】组件三大核心属性 📘前言

推荐整理分享【React】组件三大核心属性(react组件框架),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react 组件三种创建,react常用组件及作用,react组件定义,react 组件三种创建,react 组件三种创建,react 组件三种创建,react组件定义,react组件constructor,内容如对您有帮助,希望把文章链接给更多的朋友!

🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨

【React】组件三大核心属性📘前言📖1.state📑setState📖2.props📑对props进行限制📑对props设置默认值📑state与props的区别📖3.ref📖1.state

state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)。

组件被成为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)。

一、定义state,访问state

写法一(常用、简写)

直接向class App添加state属性

import React, { Component } from 'react'export default class App extends Component { // ====定义state写法一==== state = { isCollect: false, myname:"Kerwin" } render() { return ( <div> <h1>欢迎来到react开发-{this.state.myname}</h1> </div> ) }}

写法二(了解)

使用构造器,初始化一个state属性

import React, { Component } from 'react'export default class App extends Component { // ====定义state写法二==== constructor(){ super() this.state = { isCollect:false, myname:"Kerwin" } } render() { return ( <div> <h1>欢迎来到react开发-{this.state.myname}</h1> </div> ) }

二、修改state

想要修改state中的数据,我们就需要自定义一个修改state的方法。

如何自定义这个方法并且调用?

关键点在于,this指向应为App这个类的实例对象

...render(){ {/* 法一 */} <button onClick={this.handleAddClick}>add</button> {/* 法二 */} <button onClick={this.handleDelClick(index)}>delete</button>}handleAddClick= ()=>{}handleDelClick(){}

如何修改state对象中的数据?

state状态数据,不支持直接修改或更新!需要借助setState!

📑setState

this.state 是纯js对象,在Vue中,data属性是利用object.defineProperty 处理过的,更改data的数据的时候会触发数据的getter和setter,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法 setState。

实例:

修改state.isHot 的值。

...state = {isHot: true,wind: '微风'}render(){ return ( <div> <h1 onClick={this.changeWeather}>天气:{this.state.isHot}-{this.state.wind}</h1> </div> )}...changeWeather = ()=>{ const isHot = this.state.isHot this.setState({isHot:!isHot})}...

此处state被修改后的结果为: state = {isHot: false, wind:'微风'}

setState可以更新state ,且更新是一种合并不是替换!

特别注意:不能直接修改状态(state),可能会造成不可预期的后果!

扩展:

假如state属性中存有一个数组,如何修改这个数组的值呢?

state = { list: ['aaa','bbb','ccc']}

切记不能写成这样!!

const newlist = this.state.listnewlist.push('ddd')

解决办法:

由于我们不能直接修改state中的数据,所以需要将 list 这个数组深复制一份,对复制得来的新数组进行修改并使用setState传入。

//法一const newlist = [...this.state.list]//法二const newlist = this.state.list.concat()//法三const newlist = this.state.list.slice()//...

setState更新状态不总是异步的。

【React】组件三大核心属性(react组件框架)

setState还接收第二个参数,第二个参数是回调函数,当状态和 dom更新完后就会被触发。

📖2.props

props是从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式传入新的 props。

1.传递单个属性

在组件上采用 key=value的形式写下属性,子组件通过 this.props获取属性。

<Person name="Alice"></Person>const {name} = this.props

2.批量传递属性

使用展开运算符

const p = {name:'Alice',age:23,sex:'女'}...<Person {...p}></Person>

注意:在原生js下,使用展开运算符展开一个对象,这种写法是会报错的。

但在babel和react的影响下,这种写法不会报错,展开运算符也可以展开一个对象了,但仅仅适用于标签语法中。

📑对props进行限制

首先需要引入

import PropTypes from 'prop-types'

写法一:

写在类的内部

static propTypes = { '标签属性':'限制'}

写法二:

写在类的外部

类名.propTypes = {//...}

对标签属性进行类型限制

import PropTypes from 'prop-types'...static propTypes = {name: PropTypes.string, //限制name属性为字符串类型age: PropTypes.number, //限制age为数值 speak: PropTypes.func, //限制speak为函数 isStudent: PropTypes.bool, //限制isStudent为布尔值}

对属性进行必要性限制

PropTypes.string.isRequired📑对props设置默认值

引入

import PropTypes from 'prop-types'

写法一:

写在类的内部

static defaultProps = { 标签属性:默认值}

写法二:

写在类的外部

类名.defaultProps = {//...}

例:

import PropTypes from 'prop-types'...static propTypes = {age:18 //默认age为18}

props 不能在子组件修改!!!

📑state与props的区别

state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化,可以被组件自身修改,而外部不能修改也不能访问。你可以认为 state是一个局部的、只能被组件自身控制的数据源。 state中状态可以通过 this.setState方法进行更新,setState会导致组件的重新渲染。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props,否则组件的 props永远保持不变。

没有 state的组件叫无状态组件(stateless component),设置了state的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态地组件。这样会降低代码维护地难度,也会在一定程度上增强组件的可复用性。

📖3.ref

给标签设置ref=“username”

​ 通过这个获取this.refs.username,ref可以获取到应用的真实dom。

给组件设置ref=“username”

​ 通过这个获取this.refs.username,ref可以获取组件对象。

新的写法

myRef = React.createRef()...<div ref={this.myref}>hello</div><button onClick={()=>{ //访问 console.log(this.myref.current) }}></button>

React.createRef调用后可以返回一个容器,该容器可以存储被Ref所标识的节点,该容器“专人专用”。

本文链接地址:https://www.jiuchutong.com/zhishi/299510.html 转载请保留说明!

上一篇:【node进阶】深入浅出websocket即时通讯(一)(node深入浅出pdf)

下一篇:【图像分类数据集】非常全面实用的垃圾分类图片数据集共享(图像分类实战)

  • 冰箱冷藏室结冰怎么解决小妙招(冰箱冷藏室结冰怎么解决)(冰箱冷藏室结冰是什么原因怎样处理)

    冰箱冷藏室结冰怎么解决小妙招(冰箱冷藏室结冰怎么解决)(冰箱冷藏室结冰是什么原因怎样处理)

  • google不可以直接搜索吗(google不能访问)(chrome不能用谷歌)

    google不可以直接搜索吗(google不能访问)(chrome不能用谷歌)

  • 被对方删除了发信息对方能看到吗(被对方删除了发信息没有显示)

    被对方删除了发信息对方能看到吗(被对方删除了发信息没有显示)

  • pc端浏览器什么意思(uc浏览器吧)

    pc端浏览器什么意思(uc浏览器吧)

  • 苹果watch3和5有什么区别(apple watch 3和5区别)

    苹果watch3和5有什么区别(apple watch 3和5区别)

  • 光端机是什么设备(什么叫光端机)

    光端机是什么设备(什么叫光端机)

  • QQ极简模式好处(qq极简模式什么时候上线)

    QQ极简模式好处(qq极简模式什么时候上线)

  • 闲鱼状态怎么改已下架(闲鱼状态怎么改已卖出)

    闲鱼状态怎么改已下架(闲鱼状态怎么改已卖出)

  • 手机不在身边微信收款语音播报怎么设置(手机不在身边微信怎么上)

    手机不在身边微信收款语音播报怎么设置(手机不在身边微信怎么上)

  • 小米5x用OTG显示不出来

    小米5x用OTG显示不出来

  • 华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

    华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

  • 央视影音取消了投屏吗(央视影音停止运行了,怎样恢复运行)

    央视影音取消了投屏吗(央视影音停止运行了,怎样恢复运行)

  • 手机原彩显示什么意思(手机原彩显示在哪里)

    手机原彩显示什么意思(手机原彩显示在哪里)

  • 手机qq如何连接打印机(手机QQ如何连接电脑查看文件)

    手机qq如何连接打印机(手机QQ如何连接电脑查看文件)

  • 苹果xsmax有没有nfc功能(苹果xsmax现在多少钱)

    苹果xsmax有没有nfc功能(苹果xsmax现在多少钱)

  • 互联网用于加密机制的协议是(互联网用于加密的协议)

    互联网用于加密机制的协议是(互联网用于加密的协议)

  • vivo怎么看电话卡的号码(vivo怎么看电话录音)

    vivo怎么看电话卡的号码(vivo怎么看电话录音)

  • oppo17上市时间(oppor17什么时候出来的)

    oppo17上市时间(oppor17什么时候出来的)

  • 华为nova4开发者选项在哪里(华为nova4开发者选项在哪里找)

    华为nova4开发者选项在哪里(华为nova4开发者选项在哪里找)

  • 为什么实况照片不动(为什么实况照片发给好友就不能动了)

    为什么实况照片不动(为什么实况照片发给好友就不能动了)

  • ipad迷你5怎么分屏(ipadmini5怎么分屏操作记笔记)

    ipad迷你5怎么分屏(ipadmini5怎么分屏操作记笔记)

  • mate20电池多少毫安(华为mate20电池多大容量)

    mate20电池多少毫安(华为mate20电池多大容量)

  • 怎么关闭手机自动更新(怎么关闭手机自动续费)

    怎么关闭手机自动更新(怎么关闭手机自动续费)

  • 图标颜色怎么设置(图标的颜色怎么更改)

    图标颜色怎么设置(图标的颜色怎么更改)

  • 物业公司代收电费怎么开票
  • 退税流程怎么操作APP
  • 机票的电子发票和行程单有什么区别
  • 小规模建筑业如何做账
  • 网上代购收取手机费吗
  • 定期定额户超过定额怎么报个税
  • 法人存入现金的会计分录
  • 股东往来款怎么处理
  • 已认证的发票没领怎么办
  • 申报所得税营业税怎么算
  • 开具发票只有票号可以吗?
  • 代发农民工工资承诺书
  • 税收缴款书税务收现专用的用途
  • 所得税季度报表营业外收入填哪
  • 一般纳税人选择简易计税进项税可以抵扣吗
  • 农村合作社开的鸡蛋免税票可以抵进项税吗?
  • 加班工资算做个月工资吗
  • 年数总和折旧计算方法
  • 转移性支出与转移性收入相对应主要包括
  • 几种更正法
  • 企业计提的安全生产费用年末应如何处理
  • 现金日记账本月合计图
  • 2019新版利润表填表说明
  • 应补退所得税额是什么
  • 查账征收的企业所得税什么时候开始汇算
  • 银行 委托收款
  • 货物装卸过程中由于操作不当或违反操作规程
  • 退休人员返聘工资怎么发放
  • 所得税补税怎么申报
  • 固定资产 出售
  • 纳税申报怎么做
  • PHP:oci_server_version()的用法_Oracle函数
  • 福利费如何做会计分录
  • 销售旧设备如何开票
  • neo什么意思翻译成中文
  • fpassist.exe是什么进程 有什么作用 fpassist进程查询
  • 房地产佣金手续费财务处理
  • 税务 终结执行
  • 税控盘每年的服务费可以抵扣吗
  • 关联方的四种认证方式
  • 会计准则 职工福利
  • 亚伯拉罕湖中的树,加拿大艾伯塔 (© Coolbiere/Getty Images)
  • php自动化脚本
  • 微信利用php创建文件
  • 管理费用未分配利润
  • 如何网上添加办税员上海
  • 出纳excel基本技能
  • 帝国cms专题
  • js中同步如何理解
  • 信用减值损失的借贷方向
  • sql group by
  • 财务上大写数字420.1怎么写
  • 发票抬头能否开分支机构
  • 项目终止前期费用核销
  • 公司股东投资在哪里查
  • 生产工人工资结算表格模板
  • 建筑业 成本
  • 租入的厂房
  • 厂房鉴定费的账户是什么
  • 装订凭证需要注意事项
  • 退货款现金流量如何做
  • 认缴款和投资款区别
  • 发票勾选认证成功了是不是就可以抵扣呀
  • 财务报表怎么做
  • debian9.6安装教程
  • 怎样取消开机磁盘自动检查
  • centos6.6网络配置
  • win8.1快捷键
  • 电脑死机是什么问题
  • 苹果公司joz
  • win7系统怎么更改默认浏览器
  • 在linux操作系统中把外部设备当作文件统一管理
  • win7系统安装软件乱码
  • windows7压缩文件图标
  • windows8音频服务尚未启用 怎么解决
  • bootstrap2
  • nodejs writefile
  • unity xcode
  • 浙里办怎么给小孩子缴医保费
  • 贵州网上办税服务厅登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设