前端React笔记(尚硅谷)

react

尚硅谷react教程

  • jsx语法规则

    1.定义虚拟dom时不加引号(不是字符串)

    2.标签中混入js表达式时要用{}

    https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled.png

    js表达式与js语句不同。

    js语句是if(),for(),switch()等等。

    const data = ['a','b','c'];
    const VDOM=(
    	<div>
    		<ul>
    			{
    				data.map((item)=>{
    					return <li>{item}</li>
    				})
    			}
    		</ul>
    	</div>
    )
    

    3.样式的类名要用className

    className='title'
    

    4.内联样式

    style={{color:'white'}}
    

    5.只有一个根标签

    6.标签必须闭合

    <button></button>
    <button/>
    

    7.标签首字母

    小写字母开头 将标签转为html;若无则报错

    大写字母开头 渲染相应组件,若组件无定义报错

  • constructor()构造器

    构造器不传props会出现未知错误

    是否传递取决于是否希望在构造器中使用this.props

    class MyComponent extends React.Component{
        constructor(props){
            super(props)//必传
            this.state={ihHot:true}
        }
    }
    

    constructor一般可以不写,写的时候用于以下俩种情况:

    1.初始化内部state (this.state)

    2.为时间处理函数绑定实例(this指向问题)

  • 函数式组件

    https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%201.png

    函数定义首字母大写,渲染页面时函数写成闭合标签

  • 类式组件

    1.类中的构造器不是必须写。需要对示例初始化(添加属性)的时候写

    2.如果A继承B类,且A类中写了构造器,则A类构造器中super必须调用

    3.类中所定义的方法都放在类的原型对象上,供实例使用

    4.类中可以直接写赋值语句

    class MyComponent extends React.Component{
        render(){
            return 
        }
    }
    
  • 类式组件实例三大核心属性

    • 1.state:改变组件状态

      1)基本使用

      class MyComponent extends React.Component{
          constructor(props){
              super(props)
              this.state={isHot:true}
          }
      }
      
      class MyComponent extends React.Component{
          state={}//初始化状态
      }
      

      2)状态使用setState()合并更改,不是替换

      每次setState都会重新调用render

      this.setState({isHot:!isHot})
      

      3)constructor和render中this都指向组件。

      组件自定义方法this指向undefined,通过以下俩种方法指向组件

      changeweather=()=> {//this指向父层
       }
      
      class MyComponent extends React.Component{
                  constructor(props){
                      super(props)
                      this.state={ihHot:true}
                      this.changeweather=this.demo.bind(this)
      //右侧的this.demo即下面的demo方法,bind生成新函数,实例对象变为括号里的this
                  }
                  render(){
                      const {isHot}=this.state
                      return <h2 onClick={this.changeweather}>今天天气{isHot?'炎热':'凉爽'}</h2>
                  }
                  demo() {
                      const isHot=this.state.isHot;
                      this.setState({isHot:!isHot})
                  }
              }
      
    • 2.props:给组件传入数据

      • 花括号代表里面是js代码,… 是展开运算符

        展开运算符一般用于展开数组,拼接数组

        const arr1=[1,2,3];
        const arr2=[4,5,6];
        const arr3=[...arr1,...arr2]
        

        只有这种时候可以使用…p展开运算符展开遍历对象

        class Person extends React.Component{
            render(){
                const {name,age,sex}=this.props
                return (
                    <ul>
                        <li>姓名{name}</li>
                        <li>sex{sex}</li>
                        <li>age{age}</li>    
                    </ul>
                )
            }
        }
        const p={name:"xw",age:17,sex:'nv'}
        ReactDOM.render(<Person {...p}/>,document.querySelector('.demo'))
        
      • Prop是只读的

        对props实例限制,大小写敏感

        Person.propTypes={
            name:PropTypes.string.isRequired,//name只能是string类型且实例时必须传入
        		sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func,
        }
        

        对props默认值

        Person.defaultProps={
            sex:'没有传性别',
            age:18
        }
        
      • Prop简写

        class Person extends React.Component{
        	 static propTypes={
              name:PropTypes.string.isRequired,
              sex:PropTypes.string,
              age:PropTypes.number,
              speak:PropTypes.func,
            }
            static defaultProps={
                sex:'没有传性别',
                age:18
        	   }
            render(){
                const {name,age,sex}=this.props
                return (
                    <ul>
                        <li>姓名{name}</li>
                        <li>sex{sex}</li>
                        <li>age{age}</li>    
                    </ul>
                )
            }
        }
        
      • 函数式组件使用props

        function Person(props) {
            const {name,age,sex}=props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>{sex}</li>
                    <li>{age}</li>
                </ul>
            )
        }
        Person.propTypes={//限制
        }
        Person.defaultProps={//默认参数
        }
        ReactDOM.render(<Person name="qq" age={18} sex="女" />,document.querySelector('.text'))
        
    • 3.refs:绑定俩个组件

      • 字符串形式的ref(不推荐使用)

        class Demo extends React.Component{
            showData=()=>{
                const {button1}=this.refs
                alert(button1.value)
            }
            render(){
                return(
                    <div>
                        <input ref="button1" type="text"/>
                        <button onClick={this.showData}>点我</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.querySelector(".text"));
        
      • ref回调函数

        ref回调函数如果以内联函数的方式定义,在节点更新过程中重新执行render,ref回调函数被执行俩次,第一次传入参数null(清空ref),第二次传入dom节点,定义成类的绑定函数可以避免更新时调用俩次的问题(不会清空ref)

        class Demo extends React.Component{
                    showData=()=>{
                        const {button1}=this
                        alert(button1.value)
                    }
                    render(){
                        return(
                            <div>
                                <input ref={(a)=>{this.button1=a}} type="text"/>
                                <button onClick={this.showData}>点我</button>
                            </div>
                        )
                    }
                }
                ReactDOM.render(<Demo/>,document.querySelector(".demo"));
        

        简写

        <input ref={c=>this.input1=c} type="text"/>
        

        定义成类的绑定函数

        <input ref={this.saveInput} type="text"/>
        
      • React.creatRef(推荐)

        可以返回一个容器,该容器可以存储被ref所标识的一个节点(不能是多个)

        class Demo extends React.Component{
                    myRef=React.createRef()//创建ref
                    showData=()=>{
                        console.log(this.myRef.current.value);
                    }
                    render(){
                        return(
                            <div>
                                <input ref={this.myRef} type="text"/>
                                <button onClick={this.showData}>点我</button>
                            </div>
                        )
                    }
                }
        
      • event.target

        避免过度使用ref:如果操作的dom和触发事件的dom为同一个则可以通过event.target

        showData=(event)=>{
        	alert(event.target.value)//拿到input的值
        }
        render(){
        	return(
        		<input onBlur={this.showData} type="text"/>//失去焦点触发showData
        	)
        }
        
  • 受控组件和非受控组件

    输入类dom现用现取即为非受控组件

    受控组件如下代码(随着输入已经存储入state,使用时再从state中取出)

    demo = (event)=>{
    	console.log(event.target.value)
    }
    <input onChange={this.demo} type="text"/>
    
  • 高阶函数

    高阶函数分为俩种:1.接收的参数是函数 2.返回值是函数

    常见高阶函数:Promise,setTimeout,arr.map()

    new Promise(()=>{})
    setTimeout(()=>{})
    

    函数的柯里化:通过函数调用返回函数,实现多次接收参数最后统一处理的函数编码形式

    • 柯里化 返回值函数实例

      onChange调用的是saveForm函数

      <input onChange={this.saveForm} type="text" name="username"/>
      

      实例:onChange调用return返回值

      saveForm=(dataType)=>{
          return (event)=>{
              this.setState({[dataType]:event.target.value})
          }
      }
      <input onChange={this.saveForm('username')} type="text" name="username"/>
      
    • 不用柯里化的实现方式

      saveFormData=(dataType,event)=>{
      	this.setState({[dataType]:event.target.value})
      }
      用户名<input onChange={(event)=>{this.saveFormData('username',event)} type="text" name="username"}>
      密码<input onChange={event => this.saveFormData('password',event) type="password" name="password"}>
      
  • 生命周期回调函数

    生命周期钩子函数,生命周期函数,生命周期钩子

    • 旧版

      初始化阶段
      	constructor()//构造器
      	componentWillMount()//组件将要挂载
      	render()
      	componentDidMount(){}//组件挂载完毕(一般做初始化:开启定时器,发起网络请求,订阅信息)
      更新阶段:由this.setState或父组件重新更新render触发
      	shouldComponentUpdate()//询问它是否允许更新组件(默认返回值是true)
      	render(){}//初始化渲染,状态更新以后
      卸载组件
      	componentWillUnmount(){}//组件将要卸载时(一般做收尾:清理定时器等)
      

      生命周期流程图:forceUpdate()不更改状态中的数据强制更新

      https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%202.png

    • 新版

      新版本(即将过时,避免使用)
      UNSAFE_componentWillReceiveProps()
      UNSAFE_componentWillMount()
      UNSAFE_componentWillUpdate()
      

      https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%203.png

      getDerivedStateFromProps(){}//可以返回null或状态对象
      getDerivedStateFromProps(props,state){return props}//返回state obj后无法修改该obj
      
      getSnapshotBeforeUpdate(preprops,prestate){return props,state}
      componentDidUpdate(snapshotValue){}//接收到快照返回值
      
  • key的一些问题

    虚拟DOM中key用于数据更新,React会将新虚拟DOM与旧虚拟DOM的diff比较

    • 用map中的index作为key可能引发的问题

      1、若对数据进行:逆序添加,逆序删除等破环顺序的操作

      会产生没有必要的真实DOM更新,效率低

      2、如果包含输入类DOM(类似于input)

      会产生错误DOM更新:界面有问题

  • Todolist的总结

    https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%204.png

  • 连续解构赋值+重命名

    https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%205.png

  • 解决多级路径刷新页面样式丢失的问题

    https://gitee.com/onlytonight/csdn-note-image/raw/master/react/react%205823ac4eb28f4f62bc522e5f6d9d3e7b/Untitled%206.png

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python生成图片和音频验证码

captcha是pyhton的一个模块&#xff0c;用来生成图片和音频验证码。 安装 pip install captcha使用 from captcha.audio import AudioCaptcha from captcha.image import ImageCaptcha# 加载声音和字体 audio AudioCaptcha(voicedir/path/to/voices) image ImageCaptcha(…

Linux的环境搭建

目录 第一步&#xff1a;购买腾讯云轻量级云服务器 Step1&#xff1a;打开腾讯云 ​编辑 Step2&#xff1a;登录腾讯云并完成认证 Step3&#xff1a;选择服务器类型 Step4&#xff1a;选择服务器配置 第二部&#xff1a;下载XShell Step1&#xff1a;打开XShell Step2…

亚马逊云科技云从业者考证自习室招生啦!

今天小李哥安利的是亚马逊云科技国内社区User Group(UG)的最新线上活动&#xff0c;云从业者考证自习室(图1)。该活动将由亚马逊云科技社区技术大牛、考证大牛们&#xff0c;帮助大家在一个月内陪伴式学习、保姆级教学、提供免费备考课程&#xff0c;帮助大家在短短一个月内稳稳…

tensorflow.js 如何从 public 路径加载人脸特征点检测模型

系列文章目录 如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸…

ArcGIS Pro中的3D建模

在本文中,我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。 我的目标是尽可能避免与其他软件交互(即使是专门用于 3D 建模的软件),并利用 Pro 可以提供的可能性。 这个短暂的旅程分为三个不同的阶段:准备、组装和照明。 我们必须使用一些布局可能性以及一…

想走?可以!先买票--迭代器模式

1.1 乘车买票&#xff0c;不管你是谁&#xff01; 售票员检查谁没有买票&#xff0c;把车厢里的人都遍历一遍。 1.2 迭代器模式 迭代器模式&#xff08;Iterator&#xff09;&#xff0c;提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而又不暴露该对象的内部表示…

计算机导论——C语言001

前言 学习一门语言不是要记住所有这些函数&#xff0c;而是要懂得在哪里找到解决问题的答案 学习英语不是要记住所有单词&#xff0c;而是要懂得查字典&#xff08;因为这样就可以理解单词&#xff0c;并会用单词造句子了&#xff09; 以下侧重于了解输出&#xff08;side eff…

Day16_学点儿JavaEE_实践_基于IDEA2023的简易JavaWeb项目、Tomcat输出乱码解决

0 JavaWeb项目目录 └──JavaWeb├──resources│ └──db.properties├──src│ └──com.sdust.web│ ├──servlet│ │ └──StudentServlet│ ├──pojo│ │ └──Student│ └──util│ └──JDBCUtil├──web│ ├──st…

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡 SD/MicroSD/TF卡是基于FLASH的一种常见非易失存储单元&#xff0c;由接口协议电路和FLASH构成。市面上由不同尺寸和不同容量的卡&#xff0c;手机领域用的TF卡实际就是MicroSD卡&#xff0c;尺寸比SD卡小&#xff0c;而电路和协…

Acrobat Pro DC 2023 for mac直装激活版 pdf编辑处理工具

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑器&#xff0c;为用户提供了全面且高效的PDF处理体验。 软件下载&#xff1a;Acrobat Pro DC 2023 for mac直装激活版下载 首先&#xff0c;它支持用户从现有文档创建PDF&#xff0c;或者将其他文件格式如图片、网页等轻松转…

win11wifi总掉线怎么办,win11连接wifi频繁掉线

很多网友纷纷用上了win11系统,但是由于对win11系统的不熟悉,因此常常在使用的过程中遇到很多问题。几天前,有网友反馈,系统自从升级win11以后,电脑连接wifi上网时,总是会掉线。一般出现此问题,可能是网络没有播报或开启了无线网卡节能模式导致的。那么,win11wifi总掉线…

【Linux】开始了解重定向

送给大家一句话&#xff1a; 人真正的名字是&#xff1a;欲望。所以你得知道&#xff0c;消灭恐惧最有效的办法&#xff0c;就是消灭欲望。 – 史铁生 《我与地坛》 开始了解重定向 1 前言2 重定向与缓冲区2.1 文件描述符分配规则2.2 重定向的现象2.3 重定向的理解2.4 缓冲区…

Chatgpt掘金之旅—有爱AI商业实战篇|在线课程业务|(十五)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术创业在线课程业务有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随着…

前端vue2中的excel导出功能-file-saver,xlsx,xlsx-style的使用

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 今天遇到了一个技术点.前端的excel的纯导出功能,不和后端交互,只用前端导出数据 整体架构流程 vue2 element-ui 技术名词解释 在网上看了很多帖子,最后我选择了xlsx , file-saver , xlsx-style 这个三个插件完成…

开课通知 | 5月六西格玛绿带培训火热招生

尊敬的各位学员&#xff1a; 天行健管理咨询将于近期开展六西格玛绿带公开课&#xff0c;旨在为广大企业和个人提供专业的六西格玛绿带培训&#xff0c;帮助大家掌握六西格玛绿带的核心知识和技能&#xff0c;提升工作效率和质量。现将相关事宜通知如下&#xff1a; 一、培训时…

第十三届蓝桥杯省赛大学B组编程题(c++)

D.刷题统计 二分(AC): 注意:二分时右边界 right 的确定 #include<iostream> using namespace std; long long a,b,n; bool check(long long x){long long tx/7;x%7;long long temp0;if(x<5) tempx*a;else temp5*a(x-5)*b;long long cntt*(5*a2*b)temp;return cnt&g…

第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-七段码

#include<iostream> using namespace std; const int N 10, M 7; int e[N][N] {0}, f[N], open[N];//e[i][j]表示i和j之间是否连通&#xff1b;f[i]表示结点i的父节点&#xff1b;open[i] 1表示结点i打开&#xff0c;0表示关闭 long long ans 0;int find(int x){if(…

网络原理(应用层、传输层)

文章目录 一、应用层1.1 自定义协议1.2 通用协议XMLJSONprotobuf 1.3 DNS 域名解析系统 二、传输层2.1 UDP协议2.2 TCP协议协议端格式及解析可靠性机制确认应答超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09;流量控制拥塞控制 效率机制滑动窗口延迟应答…

Anzo Capital 荣膺2024年最值得信赖经纪商大奖

Anzo Capital 表示&#xff1a;“自Anzo Capital品牌诞生起&#xff0c;始终坚持以客户为中心&#xff0c;不断提升产品力和品牌力&#xff0c;致力于成为世界上最值得信赖和推荐的经纪商。而从2015年成立至今&#xff0c;已经服务全球40多个国家&#xff0c;超过34.8万个客户…

财富池指标公式--通达信筹码底部指标公式源码

很多交易软件上都会提供筹码分布可查看主力资金动向&#xff0c;比如说&#xff1a;同花顺软件的筹码分布功能上&#xff1a;红色筹码代表低于收盘价的获利筹码&#xff0c;蓝色筹码表示高于收盘价的套牢盘筹码。 在手机上或电脑端&#xff0c;可将光标移至相应的价位&#xf…