【React】组件实例三大属性state、props、refs

state

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染
UI,让用户界面和数据保持一致。

React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

简单的说就是组件的状态,也就是该组件所存储的数据

State与props类似,但是State是React组件内部定义的一个私有属性,并且完全受控于当前组件
在定义组件时,把需要用到的一些属性定义在State对象中,然后通过this.state.[属性名]来访问该属性
在组件中定义state属性时,只能命名为“state”,这样才能通过setState方法来更新state属性,因为在setState方法中默认会寻找名为state的属性并进行处理,所以如果命名为其它名称,是无法通过setState来更新属性值及DOM内容的

类式组件中的使用

使用的时候通过this.state调用state里的值

在类式组件中定义state

在构造器中初始化state
在类中添加属性state来初始化

修改 state

React 中不建议 state不允许直接修改,而是通过类的原型对象上的方法 setState()

setState()this.setState(partialState, [callback]);
  • partialState: 需要更新的状态的部分对象
  • callback: 更新完状态后的回调函数

有两种写法:写法1

this.setState({weather: "凉爽"
})

写法2:

// 传入一个函数,返回x需要修改成的对象,参数为当前的 state
this.setState(state => ({count: state.count+1});

ps:

  • setState是一种合并操作,不是替换操作
  • 在执行 setState操作后,React 会自动调用一次 render()
  • render() 的执行次数是 1+n (1 为初始化时的自动调用,n 为状态更新的次数)

Props

与state不同,state是组件自身的状态,而props则是外部传入的数据

类式组件中使用

在使用的时候可以通过 this.props来获取值 类式组件的 props:
在这里插入图片描述

  • 通过在组件标签上传递值,在组件中就可以获取到所传递的值
  • 在构造器里的props参数里可以获取到 props 可以分别设置
  • propTypes 和 defaultProps 两个属性来分别操作props的规范和默认值,两者都是直接添加在类式组件的原型对象上的(所以需要添加 static) 同时可以通过…运算符来简化
    在这里插入图片描述

函数式组件中的使用

函数在使用props的时候,是作为参数进行使用的(props)
在这里插入图片描述
函数组件的 props定义:

  • 在组件标签中传递 props的值
  • 组件函数的参数为 props
  • 对 props的限制和默认值同样设置在原型对象上

Refs

在没有 React 的世界中,我们会做这样的事情:

const element = document.getElementById("bla");

尽管从技术上讲,我们现在仍然可以使用 getElementById。但是为了让我们既不需要在各个角落里设置 id,也不需要了解到底层 DOM 结构,React 提供了一种更强大的访问元素的方式:Refs。

Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在我们正常的操作节点时,需要采用DOM API 来查找元素,但是这样违背了 React 的理念,因此有了refs

有两种React官方提倡操作refs的方法,分别为:

  • 回调形式
  • createRef形式

回调形式的refs

组件实例的ref属性传递一个回调函数c => this.input1 = c (箭头函数简写),这样会在实例的属性中存储对DOM节点的引用,使用时可通过this.input1来使用

使用方法

<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

我的理解
c为当前节点,并作为参数,给实例下的input1赋值

createRef 形式(推荐写法)

React 给我们提供了一个相应的API,它会自动的将该 DOM 元素放入实例对象中

我们先给DOM元素添加ref属性

<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />

通过API,创建React的容器,会将DOM元素赋值给实例对象的名称为容器的属性的current,好烦…

MyRef = React.createRef();
MyRef1 = React.createRef();

注意:一个节点创建一个容器

//调用
btnOnClick = () =>{//创建之后,将自身节点,传入current中console.log(this.MyRef.current.value);
}

例子:

import React from "react";class ClassRefCompt extends React.Component {constructor() {super();this.refEle = React.createRef();}componentDidMount() {console.log("refs:", this.refEle.current);}render() {return (<div><div id="classRef" ref={this.refEle}>Hello Ref - createRef().</div></div>);}
}export default ClassRefCompt;

结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/94118.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux实用操作(固定IP、进程控制、监控、文件解压缩)

目录 一、快捷键 1、ctrl c强制停止 2、ctrl d退出或登出 3、历史命令搜索history 4、光标移动快捷键 5、清屏 二、软件安装 1、CentOS的yum命令 2、Ubantu的apt命令 三、systemctl命令 四、软连接 五、日期、时区 1、date命令 2、修改Linux时区为东八区 3、nt…

车牌文本检测与识别:License Plate Recognition Based On Multi-Angle View Model

论文作者&#xff1a;Dat Tran-Anh,Khanh Linh Tran,Hoai-Nam Vu 作者单位&#xff1a;Thuyloi University;Posts and Telecommunications Institute of Technology 论文链接&#xff1a;http://arxiv.org/abs/2309.12972v1 内容简介&#xff1a; 1&#xff09;方向&#x…

2023蓝帽杯半决赛电子取证+CTF部分题解

文章目录 电子取证123456789101112131415 CTFWeb | MyLinuxBotWeb | AirticleShareCrypto | ezrsaPwn | AdminPwn | uafmisc|排排坐吃吃果果 电子取证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 CTF Web | MyLinuxBot Web | AirticleShare import requests import times reques…

Java中处理千万级数据的最佳实践:性能优化指南

在今天的数字化时代&#xff0c;处理大规模数据已经成为许多Java应用程序的核心任务。无论您是构建数据分析工具、实现实时监控系统&#xff0c;还是处理大规模日志文件&#xff0c;性能优化都是确保应用程序能够高效运行的关键因素。本指南将介绍一系列最佳实践&#xff0c;帮…

TinyWebServer学习笔记-互斥锁、信号量、条件变量

为什么要使用锁、信号量、条件变量&#xff1f; 网站不可能是单线程的&#xff0c;否则网站的性能和响应都会收到严重的影响。因此&#xff0c;这个项目一定是运行在多线程条件下的。而在多线程条件下&#xff0c;对共享资源的互斥访问就极其重要。 为什么要将资源封装成类&a…

IDEA中的神仙插件——Smart Input (自动切换输入法)

推荐专栏&#xff1a;开发环境配置攻略 致力于记录学习过程中各种软件的安装及环境配置操作&#xff0c;并提供详细的步骤说明和丰富的配图。涵盖了 Java、Python、IntelliJ IDEA、Tomcat、MySQL 等常见开发工具和服务器组件的配置&#xff0c;为初学者提供一个实用、全面的配置…

Pandas进阶修炼120题-第五期(一些补充,101-120题)

目录 往期内容&#xff1a;第一期&#xff1a;Pandas基础&#xff08;1-20题&#xff09;第二期&#xff1a;Pandas数据处理&#xff08;21-50题&#xff09;第三期&#xff1a;Pandas金融数据处理&#xff08;51-80题&#xff09;第四期&#xff1a;当Pandas遇上NumPy&#xf…

Vue2 第一次学习

本章为超级浓缩版,文章过于短,方便复习使用哦~ 文章目录 1. 简单引入 vue.js2. 指令2.1 事件绑定指令 v-on (简写 )2.2 内容渲染指令2.3 双向绑定指令 v-model2.4 属性绑定指令 v-bind (简写 : )2.5 条件渲染指令2.6 循环指令 v-for 3. vue 其他知识3.1 侦听器 watch3.2 计算属…

WOL唤醒配置(以太网、PHY、MAC)

目录 wol 以太网 MAC PHY RMII 通信配置 总结 wol Wake-on-LAN简称WOL&#xff0c;WOL&#xff08;网络唤醒&#xff09; 是一种标准网络协议&#xff0c;它的功效在于让已经进入休眠状态或关机状态的计算机&#xff0c;透过局域网&#xff08;多半为以太网&#xff…

lv8 嵌入式开发-网络编程开发 01什么是互联网

目录 1 计算机网络的定义与分类 1.1 按照网络的作用范围进行分类 1.2 按照网络的使用者进行分类 2 网络的网络 2.1 名词解释 2.2 边缘与核心 3 互联网基础结构发展的三个阶段 3.1 第一阶段&#xff1a;1969 – 1990 3.2 第二阶段&#xff1a;1985 – 1993 3.3 第三阶…

HTML5高级部分

目录 一、拖拽API1.1 拖拽元素1.2 监听事件1.3 dataTransfer传递数据 二、媒体API2.1 常用监听事件2.2 常用API 三、画布API3.1 canvas 标签3.2 创建canvas对象3.3 常用API 四、地理API4.1 方法 一、拖拽API 1.1 拖拽元素 页面中设置了draggable"true"的元素可以进…

【Java-LangChain:使用 ChatGPT API 搭建系统-11】用 ChatGPT API 构建系统 总结篇

第十一章&#xff0c;用 ChatGPT API 构建系统 总结篇 本课程详细介绍了 LLM 工作原理&#xff0c;包括分词器&#xff08;tokenizer&#xff09;的细节、评估用户输入的质量和安全性的方法、使用思维链作为 Prompt、通过链式 Prompt 分割任务以及返回用户前检查输出等。 本课…

linux MySQL高阶语句

linux MySQL高阶语句 1、MySQL高级语言1.1order by排序1.2group by分组1.3limit前几行1.4as别名1.5通配符1.6子查询1.7in1.8not in1.9exists 2、视图2.1视图概念2.2功能2.3应用场景2.4视图和表的区别和联系2.5创建视图 3、null值3.1null值3.2null值与空值的区别3.3验证null和空…

僵尸进程的产生原因和解决方法

僵尸进程的产生原因 当一个进程&#xff08;通常是父进程&#xff09;创建了一个子进程&#xff0c;但是在子进程终止后&#xff0c;父进程没有及时处理子进程的终止状态&#xff0c;就会导致僵尸进程的产生。这个时候&#xff0c;子进程虽然已经终止&#xff0c;但是其进程表…

Autowired和Resource的关系

相同点对于下面的代码来说&#xff0c;如果是Spring容器的话&#xff0c;两个注解的功能基本是等价的&#xff0c;他们都可以将bean注入到对应的field中 不同点但是请注意&#xff0c;这里说的是基本相同&#xff0c;说明还是有一些不同点的&#xff1a; byName和byType匹配顺…

IDEA的Maven换源

前言 IDEA是个好东西&#xff0c;但是使用maven项目时可能会让人很难受&#xff0c;要么是非常慢&#xff0c;要么直接下载不了。所以我们需要给IDEA自带maven换源&#xff0c;保证我们的下载速度。 具体操作 打开IDEA安装路径&#xff0c;然后打开下面的文件夹 plugins\m…

Armv8/9-A cpu在安全/非安全世界切换时,是否需要对共享内存进行cache维护操作?

安全之安全(security)博客目录导读 问题&#xff1a;当Armv8/9-A cpu在安全世界和非安全世界之间切换时&#xff0c;是否需要对这两个世界的共享内存进行缓存维护操作? 答案&#xff1a; 不需要。 1&#xff09;运行在非安全世界的软件只能对内存进行非安全访问&#xff0c…

第10章 MySQL(一)

10.1 谈谈MySQL的架构 难度:★★ 重点:★ 白话解析 要想彻底的理解MySQL,它的架构一定要先弄清楚,当Java程序员通过JDBC或者Mybatis去执行一条SQL的时候,到底经历了什么。下边先看一幅图: 户端:Java程序员通过JDBC或者Mybatis去拿MySQL的驱动程序,实际上就是拿客户端。…

java基础之构造器

构造器 学习java对于构造器应该很熟悉&#xff0c;但是有些人会认为构造器不是必要的&#xff0c;这就是对于构造器没有深入的了解。 每一个java类中都必须至少有一个显式或隐式的构造器&#xff0c;很多时候看到类中并没有定义构造器&#xff0c;有人会认为构造器不是必须的&a…

GNN PyG~torch_geometric 学习理解

目录 1. PyG Introduction 2. PyG Installation 2.1 PyG 安装常见错误及原因 2.2 PyG 具体安装步骤 3. torch_geometric packages torch_geometric.data.Data Dataset 与 DataLoader Dropout、BatchNorm 3. torch_geometric: 理解edge_index 3.1 理解 mini-batch edg…