React三大属性---state,props,ref

news2025/1/11 4:10:25

react的三大属性

react的三大属性分别是state props 和ref 是传递数据的重要内容

State

state是组件对象最重要的属性 包含多个key-value的组合呢 存在于组件实例对象中

基本使用

此时demo是通过onClick的回调 所以this是undefined 本来应该是window 但是局部开启了严格模式 所以是undfined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.2/cjs/react.production.min.js"></script>
    <script type="text/babel">
        //创建组件
        class Wather extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    isHot:true,
                    wind:'大风'
                }
            }
            //demo的this就是实例对象 因为他不是通过实例调用的 所以这种写法是undefined
            demo(){
                //作为onClick的回调 所以不是通过实例调用的 是直接调用的 因为局部开启了严格模式 所以是undfined
            }
            render() {
                //react是这样绑定函数的 onClick={demo}
             return <h1 onClick={this.demo}>{this.state.isHot? '炎热':"凉爽"}</h1>   
            }
        }
    </script>
</body>
</html>

解决this指向

this.demo=this.demo.bind(this); 拿一个原型上的绑定生成实例自身上的
左边是实例 右边是原型 绑定给了this
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.2/cjs/react.production.min.js"></script>
    <script type="text/babel">
        class Weatcher extends React.Component{
            constructor(props){
                //调用几次-----------new一次weatcher
                super(props)
                this.state={
                    isHot:true,
                    wind:'大风'
                }
                this.demo=this.demo.bind(this);
            }
            //demo的this就是实例对象 因为他不是通过实例调用的 所以这种写法是undefined
            demo(){
                //作为onClick的回调 所以不是通过实例调用的 是直接调用的 因为局部开启了严格模式 所以是undfined
                //利用api进行更新 且是合并不是替换
                this.setState({
                    isHot:!this.state.isHot
                })
            }
            render() {
                //几次？------------n+1 初始化一次 每次更新调用 状态更新
                //react是这样绑定函数的 onClick={demo}
             return <h1 onClick={this.demo}>{this.state.isHot? '炎热':"凉爽"}</h1>   
            }
        }
    </script>
</body>
</html>

简写 开发中使用

在这里插入图片描述

props

通过组件传参

基本使用

class Person extends React.Component{
  render() {
    console.log(this);
    return (<ul>
            <li>姓名：{this.props.name}</li>
      <li>姓名：{this.props.age}</li>
      <li>姓名：{this.props.sex}</li>
      </ul>
        )
        }
}
ReactDOM.render(<Person name="tom" age = "41" sex="男"/>,document.getElementById("test"));

对类型进行限制

写在定义类的外面 propTypes对类型和必要性进行限制
defaultProps为props定义初始值

<!-- 专门用来限制props限制 组件标签属性 PropTypes-->
    <script src="../../prop-types.js"></script>

 <script type="text/babel">

class Person extends React.Component{
  render() {
    const{name,age,sex}=this.props
    return (<ul>
      <li>姓名：{name}</li>
      <li>姓名：{age+1}</li>
      <li>姓名：{sex}</li>
    </ul>
           )
  }
}
//类型和必要性限制
Person.propTypes={
  name:PropTypes.string.isRequired,
  sex:PropTypes.string,
  age:PropTypes.number,
  speak:PropTypes.func
}
Person.defaultProps={
  sex:'不知道'
}
//默认给标签属性
const p={name:'hahahah',age:"1111"}
ReactDOM.render(<Person name="tom" age = "41" sex="男"speak={speak}/>,document.getElementById("test2"));
//允许展开对象 不是复制 只适用于标签传递参数
ReactDOM.render(<Person {...p}/>,document.getElementById("test"));
function speak(){
  alert('hahahah')
}
</script>

简写形式

给类自身添加 相当于类里面的a=1的静态属性

 <script type="text/babel">
class Person extends React.Component{
  static propTypes={
    name:PropTypes.string.isRequired,
    sex:PropTypes.string,
    age:PropTypes.number,
    speak:PropTypes.func
  }
  static defaultProps={
    sex:'不知道'
  }
  render() {
    const{name,age,sex}=this.props
    return (<ul>
      <li>姓名：{name}</li>
      <li>姓名：{age+1}</li>
      <li>姓名：{sex}</li>
    </ul>
           )
  }
}
</script>

函数式组件使用props

直接通过函数传递的props参数进行传递

function Preson(props) {
  const { name, age, sex } = this.props
  return (<ul>
    <li>姓名：{name}</li>
    <li>姓名：{age + 1}</li>
    <li>姓名：{sex}</li>
  </ul>
         )
}
Person.propTypes = {
  name: PropTypes.string.isRequired,
  sex: PropTypes.string,
  age: PropTypes.number,
}
Person.defaultProps = {
  sex: '不知道'
}
ReactDOM.render(<Person name="tom" age="41" sex="男" />, document.getElementById("test2"));

ref

基本使用 通过字符串传递

<input type="text" ref='input1'/>通过在标签传递一个字符串的形式 对this.refs.input1进行获取
this.refs展示的值
在这里插入图片描述

<script type="text/babel">
class Deom extends React.Component {
  showData=()=>{
    console.log(this.refs);
    const {input1}=this.refs
    alert(input1.value)
  }
  showData2=()=>{
    const {input2}=this.refs
    alert(input2.value)
  }
  render() {
    return(
      <div>
        <input type="text" ref='input1'/>
        <button onClick={this.showData}>点我提示左侧数据</button>
        <input type="text" onBlur={this.showData2} ref='input2'/>
      </div>
    )
  }
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

通过回调形式获取ref

回调函数形式 表示当前节点挂载ref身上并取名字叫做input1

  <input type="text" ref={(currentNode)=>{this.input1=currentNode}}/>

通过写成函数的形式表示当前节点挂载在refs上并名字叫做input1
直接通过这种方式取

 const {input1}=this
alert(input1.value)

    <script type="text/babel">
 class Deom extends React.Component {
            showData=()=>{
                const {input1}=this
                alert(input1.value)
            }
            showData2=()=>{
                const {input2}=this
                alert(input2.value)
            }
            render() {
                return(
                    <div>
                        // 回调函数形式 表示当前节点挂载ref身上并取名字叫做input1
                        <input type="text" ref={(currentNode)=>{this.input1=currentNode}}/>
                        <button onClick={this.showData}>点我提示左侧数据</button>
                        <input type="text" ref={currentNode=>this.input2=currentNode} onBlur={this.showData2}/>
                        </div>
                )
            }
        }
        ReactDOM.render(<Deom />,document.getElementById("test2"));
 </script>

执行次数

1 内联函数形式的回调会执行两次
类似于ref={currentNode=>this.input2=currentNode}
内联形式的回调形式的ref更新会执行两次 一开始调用render就会传入null清空参数
2 类绑定的形式就不会更新多次
在这里插入图片描述
对比代码如下

<script type='text/babel'>
class Deom extends React.Component {
  state={isHot:true}
  showData=()=>{
    const {input1}=this
    alert(input1.value)
  }
  showData2=()=>{
    const {input2}=this
    alert(input2.value)
  }
  changeWeather=()=>{
    const {isHot}=this.state
    this.setState({
      isHot:!isHot
    })
  }
  saveInput=(c)=>{
    this.input3=c
    console.log(c);
  }
  render() {
    const {isHot}=this.state
    return(
      <div>
        <h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':"凉爽"}</h1>
        <input type="text" ref={this.saveInput}/>
        <input type="text" ref={(currentNode)=>{this.input1=currentNode;console.log(currentNode,'111')}}/>
        <button onClick={this.showData}>点我提示左侧数据</button>
        <input type="text" ref={currentNode=>this.input2=currentNode} onBlur={this.showData2}/>
      </div>
    )
  }
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

createRef的形式

是一个方法 相当于是一个只能储存一个的节点的容器
创建

  myRef=React.createRef();

this.myRef.current.value

得到当前的值

<script type='text/babel'>
class Deom extends React.Component {
  //React.createRef调用后可以返回一个容器 该容器可以存储ref所标识的节点 专人专用
  myRef=React.createRef();
  myRef2=React.createRef();
  showData=()=>{
    alert(this.myRef.current.value)
  }
  showData2=()=>{
    alert(this.myRef2.current.value)
  }
  render() {
    return(
      <div>
        <input type="text" ref={this.myRef}/>
        <button onClick={this.showData}>点我提示左侧数据</button>
        <input type="text" ref={this.myRef2} onBlur={this.showData2}/>
      </div>
    )
  }
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

总结

本周学习到了react的生命周期部分 想着最近再把js高级和vue3复习复习 这三大属性算是很重要的部分 组件传递信息有重要作用 然后最近感觉还是写项目要多锻炼自己的封装能力

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

百科源码生活资讯百科门户类网站百科知识,生活常识

百科源码生活资讯百科门户类网站百科知识,生活常识

百科源码生活资讯百科门户类网站百科知识,生活常识 百科源码安装环境 支持php5.6&#xff0c;数据库mysql即可&#xff0c;需要有子目录权限&#xff0c;没有权限的话无法安装 百科源码可以创建百科内容&#xff0c;创建活动内容。 包含用户注册&#xff0c;词条创建&#xff…
阅读更多...
数学与计算机（2）- 线性代数

数学与计算机（2）- 线性代数

原文&#xff1a;https://blog.iyatt.com/?p13044 1 矩阵 NumPy 中 array 和 matrix 都可以用于储存矩阵&#xff0c;后者是前者的子类&#xff0c;array 可以表示任意维度&#xff0c;matrix 只能是二维&#xff0c;相当于矩阵专用&#xff0c;在一些矩阵的运算操作上较为直…
阅读更多...
Mac屏幕录制编辑软件

Mac屏幕录制编辑软件

以下是一些Mac平台上受到推荐和好评的屏幕录制编辑软件&#xff1a; OBS Studio&#xff08;免费且开源&#xff09;&#xff1a; OBS 是一款功能强大的免费屏幕录制工具&#xff0c;不仅限于游戏直播&#xff0c;也适用于各种屏幕录制需求。它允许用户捕获屏幕、摄像头、音频&…
阅读更多...
关于MySQL数据库的学习3

关于MySQL数据库的学习3

目录 前言: 1.DQL&#xff08;数据查询语言): 1..1基本查询&#xff1a; 1.2条件查询&#xff1a; 1.3排序查询&#xff1a; 1.3.1使用ORDER BY子句对查询结果进行排序。 1.3.2可以按一个或多个列进行排序&#xff0c;并指定排序方向&#xff08;升序ASC或降序DESC&#…
阅读更多...
C语言 02 安装

C语言 02 安装

C 语言的编译器有很多&#xff0c;其中最常用的是 GCC&#xff0c;这里以安装 GCC 为例。 Windows 这里以 Windows 11 为例 官方下载地址&#xff1a;https://www.mingw-w64.org/ 选择 Downloads 选择 Windows 的 GCC 环境 MingW-W64-builds 选择 GitHub 根据操作系统位…
阅读更多...
IP复习实验（gre）

IP复习实验（gre）

拓扑图(r6相当于公网设备) 要求r1,r2,r3之间是hub-spoke架构 。r1,r4,r5是全连接&#xff0c;最后做OSPF跑通 第一步把所以接口配置了 第二步配置缺省0.0.0.0 0 n6.1.1.6 &#xff08;n就是具体的路由器r1 n就是1&#xff09; 测试一下先保证公网通畅 就先配置hub架构的 hu…
阅读更多...
arp动态表缓存清除

arp动态表缓存清除

一、arp表里清除表状态&#xff1a; 1&#xff0c;Delay&#xff1a;请求arp 2&#xff0c;Reachab&#xff1a;响应arp 3&#xff0c;Stale此状态下&#xff0c;待gc_stale_time超时后&#xff0c;准备gc_interval定期清理 二、限制条件 base_reachable_time&#xff1a;后变…
阅读更多...
使用gitee自动备份文件

使用gitee自动备份文件

需求 舍友磁盘前两天gg了&#xff0c;里面的论文没有本地备份&#xff0c;最后费劲巴拉的在坚果云上找到了很早前的版本。我说可以上传到github&#xff0c;建一个私人仓库就行了&#xff0c;安全性应该有保证&#xff0c;毕竟不是啥学术大亨&#xff0c;不会有人偷你论文。但是…
阅读更多...
C到C++的敲门砖-1

C到C++的敲门砖-1

文章目录 关键字命名空间输入和输出缺省参数函数重载 关键字 相较于C语言32个关键字&#xff1a; autodoubleintstructbreakelselongswitchcaseenumregistertypedefcharexternreturnunionconstfloatshortunsignedcontinueforsignedvoiddefaultgotosizeofvolatiledoifwhilesta…
阅读更多...
配置阿里云加速器

配置阿里云加速器

国内镜像中心常用阿里云或者网易云。在本地docker中指定要使用国内加速器的地址后&#xff0c;就可以直接从阿里云镜像中心下载镜像。 2024阿里云-上云采购季-阿里云 [rootlocalhost /]# mkdir -p /etc/docker [rootlocalhost /]# tee /etc/docker/daemon.json <<-EOF &…
阅读更多...
ThreadLocal-阿里规范对ThreadLocal要求

ThreadLocal-阿里规范对ThreadLocal要求

package com.nanjing.gulimall.zhouyimo.test;import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors;/*** @author zhou* @version 1.0* @date 2024/3/17 11:05 下午*/ class MyData{ThreadLocal<Integer> threadLocal = ThreadLocal.wi…
阅读更多...
C语言 求方程ax^2+bx+c=0的根

C语言 求方程ax^2+bx+c=0的根

一、求方程ax^2bxc0的根&#xff0c;用三个函数分别求当&#xff1a;b^2-4ac大于0&#xff0c;等于0&#xff0c;和小于0时的根并输出结果。从主函数输入a&#xff0c;b&#xff0c;c的值。 #include <stdio.h> #include<math.h> float x,x1,x2,disc; int main() …
阅读更多...
ChatGPT编程实现简易聊天工具

ChatGPT编程实现简易聊天工具

ChatGPT编程实现简易聊天工具 今天借助[[小蜜蜂]][https://zglg.work]网站的ChatGPT练习socket编程&#xff0c;实现一个简易聊天工具软件。 环境&#xff1a;Pycharm 2021 系统&#xff1a;Mac OS 向ChatGPT输入如下内容&#xff1a; ChatGPT收到后&#xff0c;根据返回结…
阅读更多...
【CSP试题回顾】201509-1-数列分段

【CSP试题回顾】201509-1-数列分段

CSP-201509-1-数列分段 解题代码 #include <iostream> #include <vector> #include <algorithm> using namespace std;int n;int main() { cin >> n;vector<int>arr(n);for(auto & it:arr) {cin >> it;}auto last unique(arr.be…
阅读更多...
DevOps 环境预测测试中的机器学习

DevOps 环境预测测试中的机器学习

在当今快节奏的技术世界中&#xff0c;DevOps 已成为软件开发不可或缺的一部分。它强调协作、自动化、持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;&#xff0c;以提高软件部署的速度和质量。预测测试是这一领域的关键组成部分&#xff0c;其中机器…
阅读更多...
生成式AI竞赛：开源还是闭源，谁将主宰未来？

生成式AI竞赛：开源还是闭源，谁将主宰未来？

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
2024抖音矩阵云混剪系统源码 短视频矩阵营销系统

2024抖音矩阵云混剪系统源码 短视频矩阵营销系统

2024抖音矩阵云混剪系统源码 短视频矩阵营销系统 矩阵营销系统多平台多账号一站式管理&#xff0c;一键发布作品。智能标题&#xff0c;关键词优化&#xff0c;排名查询&#xff0c;混剪生成原创视频&#xff0c;账号分组&#xff0c;意向客户自动采集&#xff0c;智能回复&am…
阅读更多...
Python基础（七）之数值类型集合

Python基础（七）之数值类型集合

Python基础&#xff08;七&#xff09;之数值类型集合 1、简介 集合&#xff0c;英文set。 集合&#xff08;set&#xff09;是由一个或多个元素组成&#xff0c;是一个无序且不可重复的序列。 集合&#xff08;set&#xff09;只存储不可变的数据类型&#xff0c;如Number、…
阅读更多...
uwsgi+nginx+django 部署学习

uwsgi+nginx+django 部署学习

收集静态文件及部署配置 DEBUG False STATICFILES_DIRS [os.path.join(BASE_DIR, "static"), ] STATIC_ROOT /data/static python3 manage.py collectstatic 收集静态文件&#xff0c;成功后可在STATIC_ROOT目录查看 安装依赖 pip3 install uwsgi django项目结…
阅读更多...
docker基础用法-2

docker基础用法-2

文章目录 什么是dockerOCI&OCFOCIOCF docker架构docker镜像与镜像仓库docker对象安装及使用dockerdocker安装docker加速docker常用操作docker event state防火墙状态及规则 什么是docker docker中的容器&#xff1a; lxc --> libcontainer --> runC docker最开始是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023