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

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

  • 抖音直播pk是指什么(抖音直播pk是什么意思哦)

    抖音直播pk是指什么(抖音直播pk是什么意思哦)

  • 华为mate30线性马达如何设置(华为mate30线性马达怎么打开)

    华为mate30线性马达如何设置(华为mate30线性马达怎么打开)

  • 怎么对齐word文档中每一行的文字(怎么对齐word文档中的名字)

    怎么对齐word文档中每一行的文字(怎么对齐word文档中的名字)

  • 荣耀9x前置摄像头歪(荣耀9x前置摄像头怎么拆)

    荣耀9x前置摄像头歪(荣耀9x前置摄像头怎么拆)

  • qq资料卡最近常听怎么消失了(qq资料卡最近常听不更新)

    qq资料卡最近常听怎么消失了(qq资料卡最近常听不更新)

  • iwatch功能介绍(applewatch功能详解)

    iwatch功能介绍(applewatch功能详解)

  • 淘宝怎么给快递员五星好评(淘宝怎么给快递员打分)

    淘宝怎么给快递员五星好评(淘宝怎么给快递员打分)

  • 电脑关机了还能充电吗(电脑关机了还能连热点吗)

    电脑关机了还能充电吗(电脑关机了还能连热点吗)

  • 网易云我喜欢的音乐播放次数怎么算(网易云我喜欢的音乐怎么删除)

    网易云我喜欢的音乐播放次数怎么算(网易云我喜欢的音乐怎么删除)

  • 屏幕抖动怎么解决(屏幕抖动是什么问题)

    屏幕抖动怎么解决(屏幕抖动是什么问题)

  • qq标识有哪些(qq上的标识有哪几种)

    qq标识有哪些(qq上的标识有哪几种)

  • 无线网红灯闪怎么回事(无线网红色灯亮怎么回事)

    无线网红灯闪怎么回事(无线网红色灯亮怎么回事)

  • 优酷会员一个月是从什么时候到什么时候(优酷会员一个月是怎么算的)

    优酷会员一个月是从什么时候到什么时候(优酷会员一个月是怎么算的)

  • 苹果平板充不进电怎么办(苹果平板电脑充电充不进去怎么办)

    苹果平板充不进电怎么办(苹果平板电脑充电充不进去怎么办)

  • 手机dat文件可以删除吗(手机上能打开dat文件吗)

    手机dat文件可以删除吗(手机上能打开dat文件吗)

  • 抖音消息撤回会有记录吗(抖音撤回的消息对方有提示吗)

    抖音消息撤回会有记录吗(抖音撤回的消息对方有提示吗)

  • 探探怎么玩才能约到人(探探怎么玩才能约到人 有偿)

    探探怎么玩才能约到人(探探怎么玩才能约到人 有偿)

  • 快手注销账号要多久(快手注销账号要多久才搜索不到)

    快手注销账号要多久(快手注销账号要多久才搜索不到)

  • 抖音直播怎么连麦(抖音直播怎么连线主播)

    抖音直播怎么连麦(抖音直播怎么连线主播)

  • 优酷会员怎么登录(优酷会员怎么登录账号)

    优酷会员怎么登录(优酷会员怎么登录账号)

  • word 表格怎么跨页(word表格怎么跨页断行)

    word 表格怎么跨页(word表格怎么跨页断行)

  • 小米9屏占比是多少(小米9屏幕尺寸比例)

    小米9屏占比是多少(小米9屏幕尺寸比例)

  • 微信群收钱功能在哪里(微信群里收钱)

    微信群收钱功能在哪里(微信群里收钱)

  • 数据库种类(数据库种类elikes)

    数据库种类(数据库种类elikes)

  • Windows 10找不到共享计算机怎么办(windows10找不到用户和组)

    Windows 10找不到共享计算机怎么办(windows10找不到用户和组)

  • Mac OS X用户检查四部曲(mac 查看当前用户)

    Mac OS X用户检查四部曲(mac 查看当前用户)

  • jfCacheMgr.exe是什么进程 jfCacheMgr.exe程序文件介绍(jmcacdefg什么意思)

    jfCacheMgr.exe是什么进程 jfCacheMgr.exe程序文件介绍(jmcacdefg什么意思)

  • 夜晚的爱丁堡城市天际线,苏格兰 (© Suranga Weeratuna/Alamy)(爱丁堡几点天黑)

    夜晚的爱丁堡城市天际线,苏格兰 (© Suranga Weeratuna/Alamy)(爱丁堡几点天黑)

  • 存货盘亏进项税额转出是什么意思
  • 增值税发票综合服务平台验证口令失败
  • 核定税种可以在哪里申报
  • 房产税城镇土地使用税申报期限
  • 税金及附加是负债类吗
  • 固定资产未转固属于什么风险
  • 税法里面的损耗是什么
  • 材料按实际成本计价时发出成本的计算方法有
  • 暂缓收缴工会经费的请示
  • 记账凭证银行利息该怎么记凭证
  • 怎么把预付账款转到管理费用
  • 统驭科目的作用
  • 电子产品配件批发市场
  • 出口退税申报无电子信息
  • 专用凭证和通用凭证的联系和区别
  • 代开的专用发票如何开具红字发票
  • 个税手续费返还会计分录
  • 罚款所得税调整
  • 国库集中支付行政运行
  • 预付款对应的会计科目
  • 出口退税预审在申报系统怎么做
  • 烟草企业发生的广告和宣传费在当年营业收入15
  • 公司为员工承担的个税可以税前扣除吗
  • 小规模纳税人增值税征收率为
  • 企业所得税汇算清缴退税怎么做账务处理
  • 技术转让收入属于主营业务收入吗
  • 购进材料再销售怎么会计分录
  • 收到留抵税额退税怎么做分录
  • 出租房屋收的押金合法吗
  • 房屋大修理费用指哪些
  • 用友t3怎样查询报表
  • 销售外购设备并提供安装服务
  • 鸿蒙系统如何截屏
  • 如何安装react
  • 以前年度长期待摊费用没摊销怎么办
  • 会计分录是怎么样的
  • 企业第一年利润是多少
  • 预付款多长时间
  • koeids.dll
  • 水资源税收费标准
  • 资产负债表中应交税费包括哪些
  • php foreach as
  • php事务特性
  • php array_search二维数组
  • scp命令 基于SSH协议远程复制文件
  • 旅游业哪些发票需要交税
  • 税金及附加也是费用吗
  • java接口基础知识
  • 子公司可以吸收母公司吗
  • 购入需安装设备的会计分录
  • 增值税为什么不用计提
  • 工业企业外购存货成本有
  • 个贷系统平账专户A户付款会计分录
  • 预付款已经开了发票未到货要怎么做账
  • 销售佣金的会计科目
  • 在岗职工平均工资在哪里查询
  • 资产减值损失冲减
  • 印花税属于什么科目
  • workbench如何运行
  • windows 地址解析命令
  • windows预览版计划
  • ubuntu安装超详细教程
  • win8删除所有内容并重新安装windows
  • centos6.8升级centos7
  • win7专用字符编辑程序
  • 事件处理的三个要素
  • mfc界面布局
  • javascript事件模型介绍
  • css+div布局的常用方法
  • Https联网工具类
  • dos命令查看
  • python 入门指南
  • js中日期格式转换
  • awk范围筛选
  • 在浏览器中打开是什么意思
  • python怎么画子图
  • 中通快递广东省内收费标准
  • 河北省职称证书电子版
  • 民营非盈利医院能转让吗
  • 申报地税的流程图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设