位置: 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)

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

  • 抖音封号还能恢复吗(抖音封号了还能解封吗?)

    抖音封号还能恢复吗(抖音封号了还能解封吗?)

  • 华为手机晚上微信信息没有提示(华为手机晚上微信没有声音)

    华为手机晚上微信信息没有提示(华为手机晚上微信没有声音)

  • 显卡分为哪两大类(显卡分为两大品牌)

    显卡分为哪两大类(显卡分为两大品牌)

  • vivo手机录屏怎么录制内部声音(vivo手机录屏怎么不录外界声音)

    vivo手机录屏怎么录制内部声音(vivo手机录屏怎么不录外界声音)

  • 淘宝的评价怎么看不到(淘宝的评价怎么分享到逛逛)

    淘宝的评价怎么看不到(淘宝的评价怎么分享到逛逛)

  • 拼多多直播间怎么进去(拼多多直播间怎么隐藏客户昵称)

    拼多多直播间怎么进去(拼多多直播间怎么隐藏客户昵称)

  • 骁龙865和765g有什么区别(骁龙865和骁龙765g的性能差多少)

    骁龙865和765g有什么区别(骁龙865和骁龙765g的性能差多少)

  • 华为荣耀v10怎么清除后台运行(华为荣耀v10怎么关闭下拉搜索)

    华为荣耀v10怎么清除后台运行(华为荣耀v10怎么关闭下拉搜索)

  • iphone11经常弹出运营商(苹果11弹屏)

    iphone11经常弹出运营商(苹果11弹屏)

  • 腾讯钻石充值能干什么(腾讯钻石购买)

    腾讯钻石充值能干什么(腾讯钻石购买)

  • ctrl+n是什么快捷键

    ctrl+n是什么快捷键

  • 打印机慢是什么原因(打印机 慢)

    打印机慢是什么原因(打印机 慢)

  • 电脑怎么取消大写锁定(电脑怎么取消大屏幕)

    电脑怎么取消大写锁定(电脑怎么取消大屏幕)

  • 一加dc调光有什么用(一加的dc调光真的有用吗)

    一加dc调光有什么用(一加的dc调光真的有用吗)

  • 京东未收货可以申请退款吗(京东未收货可以改地址吗)

    京东未收货可以申请退款吗(京东未收货可以改地址吗)

  • 手机怎么恢复浏览器历史记录(手机怎么恢复浏览器下载记录)

    手机怎么恢复浏览器历史记录(手机怎么恢复浏览器下载记录)

  • 小米盒子怎么调整屏幕大小(小米盒子怎么调整画面比例)

    小米盒子怎么调整屏幕大小(小米盒子怎么调整画面比例)

  • wps文字怎么画表格(wps文字怎么画图)

    wps文字怎么画表格(wps文字怎么画图)

  • 亭亭玉立是什么意思(亭亭玉立是什么意思?出处?)

    亭亭玉立是什么意思(亭亭玉立是什么意思?出处?)

  • 苹果电话怎么设置陌生电话(苹果电话怎么设置震动响铃)

    苹果电话怎么设置陌生电话(苹果电话怎么设置震动响铃)

  • 苹果xs max后面是玻璃能换吗(苹果xs max后面是什么材质)

    苹果xs max后面是玻璃能换吗(苹果xs max后面是什么材质)

  • 手机怎么剪拼音乐(手机怎么剪图片拼图)

    手机怎么剪拼音乐(手机怎么剪图片拼图)

  • 基于STM32F103C8T6与ESP8266的物联网智能温度采集与蓝牙OLED数字钟的设计与实现(基于stm32f103c8t6的毕业设计)

    基于STM32F103C8T6与ESP8266的物联网智能温度采集与蓝牙OLED数字钟的设计与实现(基于stm32f103c8t6的毕业设计)

  • phpcms采集不到网址怎么办(php采集器)

    phpcms采集不到网址怎么办(php采集器)

  • 9个点的发票跟6个点区别
  • 水利基金在哪个科目核算
  • 预收账款借方余额可以计入应收账款的哪方
  • 购进国产设备的增值税处理规定
  • 车辆抵押贷款怎么做
  • 汇算清缴期间费用社保填哪里
  • 购买的固定资产没有使用,是否计提折旧
  • 市场费用的账务处理
  • 企业基本保险
  • 公司注册的费用记什么科目
  • 增值税专用发票和普通发票的区别
  • 没收到发票可以勾选认证吗
  • 没有证书可以报特长生吗
  • 增值税抄税报税流程2021
  • 什么是工商企业为了筹集资金而发行的债券
  • 谷歌浏览器adobe flash player已不再支持
  • 如何彻底清洁
  • 建筑企业收到预收账款要交增值税吗
  • 现金流量表的编制方法
  • mac屏幕共享要打开什么权限
  • 公司借法人的钱超过一年
  • php获取ftp文件目录
  • win11专业版和家庭版哪个更流畅
  • wwwxxx域名选择(www.xxx.com或者.cn)
  • 企业购入旧设备怎么入账
  • 物资销售经营范围
  • php render()
  • 关联企业拆借资金的税务处理
  • pytorch :OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading 【已解决】
  • php提取字符串中某个字符
  • laravel怎么用
  • 互联网行业成本控制现状
  • php同时使用session和cookie来保存用户登录信息的实现代码
  • 建筑业挂靠工程会计与税务处理怎么做?
  • css中哪些属性可以使用
  • 旅行社开的发票怎么记账?
  • 残疾人保证金怎么报税
  • 企业没有ca怎么登陆公积金账户
  • 损益表填制
  • 无形资产摊销是按原值吗
  • MYSQL explain 执行计划
  • 建安类企业包括哪些公司
  • mysql命令行工具是什么
  • 应交税费核算范围
  • 融资租赁固定资产折旧年限
  • 买一赠一怎么做账
  • 材料成本差异是什么
  • 车船税交不交印花税
  • 电子商务会计科目有哪些
  • 公司购买银行理财产品收益交什么税
  • 外经证是怎么样的
  • 同时知识产权专利,其做账是?
  • 其他公司借款现金怎么办
  • 福利费要交个人所得税嘛
  • 用友t3月末转账流程图
  • 员工工资费用
  • 辞退员工 工资
  • 工程发票可以作废吗
  • 废品损失明细账应选择三栏式
  • mysql的性能调优
  • mysql数据库定时备份脚本
  • Ubuntu 8.10 Server Ruby 的安装方法
  • debian安装配置清华源
  • linux系统磁盘管理的主要内容
  • 如何关闭office开机自启动
  • linux中vi命令详解
  • windows10 2021预览版
  • win8.1出现了一些问题
  • win10无法升级系统
  • Unity3D游戏开发毕业论文
  • javascript的理解
  • unity游戏开发的技术
  • JavaScript浏览器扩展
  • 销售黄金的基本知识
  • 北京办理税务登记的地方
  • 工商注册和税务登记费用
  • 开专票需要什么资料
  • 广州地税网上服务大厅地址
  • 审计程序检查的定义
  • 税务管理工作检讨书范文
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设