当前位置: 首页 > news >正文

React16入门到入土

搭建环境

默认你已经安装好 node.js

安装 react 脚手架

学习的过程中,我们采用React官方出的脚手架工具 create-react-app

npm install -g create-react-app

如果提示没有权限,win 用户可以管理员打开终端,mac 用户 可以在前面加上 sudo

新建第一个项目

在指定文件下

create-react-app study-demo 

运行

cd study-demo
npm start

脚手架生成的项目目录介绍

  • README.md :这个文件主要作用就是对项目的说明。
  • package.json: 这个文件是webpack配置和项目包管理文件。
  • package-lock.json:这个文件用一句话来解释,就是锁定安装时的版本号,并且需要上传到git,以保证其他人再npm install 时大家的依赖能保证一致。
  • gitignore : 这个是git的选择性上传的配置文件。
  • node_modules :这个文件夹就是我们项目的依赖包。
  • public :公共文件,里边有公用模板和图标等一些东西。
  • src : 主要代码编写文件
    • index.js : 这个就是项目的入口文件
    • index.css :这个是index.js里的CSS文件
    • app.js : 这个文件相当于一个方法模块,也是一个简单的模块化编程
    • serviceWorker.js: 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能

组件的基础编写

修改App.js 文件

import React, {Component} from 'react'class App extends Component{render(){return (<div className="content">Hello React</div>)}
}
export default App;

这里的 class 是面向对象语言的用法

className 是React 为了区别于 class 的特殊处理

React中JSX语法基础

JSX 就是 Javascript和XML结合的一种格式。

React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM

当遇到<,JSX就当作HTML解析

遇到{就当JavaScript解析

比如我们写一段JSX语法

<ul className="my-list"><li>Hello React</li><li>I love React</li>
</ul>

相当于

var child1 = React.createElement('li', null, 'Hello React');
var child2 = React.createElement('li', null, 'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

组件和普通JSX语法区别

自定义的组件必须首写字母要进行大写,而JSX是小写字母开头

JSX中使用三元运算符

<ul className="my-list"><li>Hellow {false?'React':'Word'}</li><li>I love React</li>
</ul>

JSX中使用循环

jsx 可以自动展开数组

<ul>{this.state.list.map((item,index)=>{return <li>{item}</li>})}
</ul> 

Fragment 标签

因为组件只能有一个根目录

空标签,不会在页面留下痕迹

相当于 vue的 template , 小程序的 block

响应式设计和数据绑定

React 不建议你直接操作 DOM 元素,而是要通过数据进行驱动,改变界面中的效果

数据定义在组件中的构造函数里constructor

constructor(props){super(props) //调用父类的构造函数,固定写法this.state={inputValue:'' , // input中的值list:[]    //列表}
}

绑定数据

<input value={this.state.inputValue} /> 

绑定事件

render()方法的下面建立一个inputChange()方法

inputChange(e){console.log(e.target.value);this.setState({inputValue:e.target.value})
}

将事件绑定

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

​ 1. 必须要用 bind 设置一下指向(ES6的语法)

​ 2. 改变值需要使用 this.setState 方法

点击事件

<div><input value={this.state.inputValue} onChange={this.inputChange.bind(this)} /><button onClick={addList}> 增加 </button>
</div>
addList(){this.setState({list:[...this.state.list,this.state.inputValue]})}

注意点:

1. JSX 的点击事件写法是 onClick
1. React是禁止直接操作 state 的, 比如push,splice 都是不建议使用

JSX 代码注释

<Fragment>{/* 第一种写法写法 */}{// 第二种写法,此写法只能单独写一行}
</ Fragment>

JSX 解析HTML

可以使用 dangerouslySetInnerHTML 属性解决

<div dangerouslySetInnerHTML={{__html: this.state.htmlValue}}>

组件

父组件向子组件传值

父组件

import React,{Component,Fragment } from 'react'
import Item from './Item'class Test extends Component{constructor(props){super(props)this.state={list:[1, 2] }}render() {return (<Pragment><ul>{this.state.list.map((item,index)=>{return (<Item key={index} content={item} />)})}</ul>  </ Pragment>)}
}export default Test

子组件

import React, { Component } from 'react'; 
class Item extends Component { render() { return ( <div>{this.props.content}</div>);}
}
export default Item;

子组件向父组件传递数据

React有明确规定,子组件不能操作父组件里的数据,所以需要借助一个父组件的方法,来修改父组件的内容

import React,{Component,Fragment } from 'react'
import Item from './Item'class Test extends Component{constructor(props){super(props)this.handleClick=this.handleClick.bind(this)this.state={list:[1, 2] }}handleClick(key){const arr = this.state.list.filter(item => item !==key)this.setState({list: arr})}render() {return (<Pragment><ul>{this.state.list.map((item,index)=>{return (<Item key={index} content={item} handleDel={handleClick} />)})}</ul>  </ Pragment>)}
}export default Test

子组件

import React, { Component } from 'react'; 
class Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>);}
}
export default Item;

prop-types 校验传递的值

在vue中,我们 props: {xxx: { type: xxx, isRequire: true, default: xxx }} 可以校验传递的值

在 react 中 我们可以用 prop-types

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'class Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>);}
}Item.PropTypes = {content: PropTypes.string,handleDel: PropTypes.func
}export default Item;

isRequired关键字了,它表示必须进行传递,如果不传递就报错

Item.PropTypes = {content: PropTypes.string.isRequired,handleDel: PropTypes.func.isRequired
}

设置默认值

Item.defaultProps = {content: '默认的值'
}

Ref 的使用

跟vue一样,定义了ref,就能拿到该元素的大部分信息

定义

<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}ref={(inputRef)=>{this.inputRef=inputRef}}
/>

使用

inputChange(){this.setState({inputValue:this.inputRef.value})
}

React 生命周期

React生命周期分为四个大阶段

Initialization:初始化

Mounting:挂载

Updation:更新

Unmounting:销毁

注意点:

​ constructor 不是生命周期函数,虽然它和生命周期函数的性质一样

Initialization

​ 定义属性(props)和状态(state)

Mounting

  1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
  2. render : 页面state或props发生变化时执行。
  3. componentDidMount : 组件挂载完成时被执行。

注意点:

componentWillMountcomponentDidMount 这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行

Updation

  1. shouldComponentUpdate 函数会在组件更新之前,自动被执行。它要求返回一个布尔类型的结果,必须有返回值,常用于组件性能优化。
  2. componentWillUpdate 在组件更新之前,但 shouldComponenUpdate 之后被执行。
  3. componentDidUpdate 在组件更新之后执行,它是组件更新的最后一个环节
  4. componentWillReceiveProps 子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行

注意点:

​ 如果shouldComponentUpdate 返回false,后面的函数就不会被执行了。

componentWillReceiveProps 组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行

Unmounting

componentWillUnmount 函数时组件从页面中删除的时候执行

利用shouldComponentUpdate 优化组件

在上面的代码中,我们输入框频繁输入,会导致子组件频繁刷新,导致性能损耗

shouldComponentUpdate 函数就可以简单的解决调这个问题

shouldComponentUpdate(nextProps,nextState){if(nextProps.content !== this.props.content){return true}else{return false}
}

相关文章:

React16入门到入土

搭建环境 默认你已经安装好 node.js 安装 react 脚手架 学习的过程中&#xff0c;我们采用React官方出的脚手架工具 create-react-app npm install -g create-react-app如果提示没有权限&#xff0c;win 用户可以管理员打开终端&#xff0c;mac 用户 可以在前面加上 sudo …...

【GPT引领前沿】GPT4技术与AI绘图

推荐阅读&#xff1a; 1、遥感云大数据在灾害、水体与湿地领域典型案例实践及GPT模型应用 2、GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术 GPT对于每个科研人员已经成为不可或缺的辅助工具&#xff0c;不同的研究领域和项目具有不同的需求。例如在科研编程…...

【LeetCode】19. 删除链表的倒数第 N 个结点

19. 删除链表的倒数第 N 个结点&#xff08;中等&#xff09; 方法&#xff1a;快慢指针 思路 为了找到倒数第 n 个节点&#xff0c;我们应该先找到最后一个节点&#xff0c;然后从它开始往前数 n-1 个节点就是要删除的节点。 对于一般情况&#xff1a;设置 fast 和 slow 两个…...

spring boot3.x集成swagger出现Type javax.servlet.http.HttpServletRequest not present

1. 问题出现原因 spring boot3.x版本依赖于jakarta依赖包&#xff0c;但是swagger依赖底层应用的javax依赖包&#xff0c;所以只要已启动就会报错。 2. 解决方案 移除swagger2依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfo…...

《低代码指南》——智能化低代码开发实践案例

大模型能通过自然语言理解自动生成需求文档及代码供给低代码开发者使用&#xff0c;也具备自动检测和修复代码错误、自动优化代码、找出冗余并提供高效方案等自动化能力&#xff0c;为开发者带来需求模式、设计模式、开发模式的变化&#xff0c;节省时间成本、代码质量更优、进…...

268_C++_字节计算(((bits) + 7) / 8)、字节对齐(((number) + 3) / 4 * 4)

这段代码中包含了两个宏的定义,它们似乎用于进行位操作和字节对齐操作。让我们逐个来解析这两个宏: BITS_TO_BYTES(bits) 宏:#define BITS_TO_BYTES(bits) (((bits) + 7) / 8)这个宏的作用是将位数(bits)转换为字节数(bytes)。它的计算方式是将位数加上7,然后除以8,这…...

JavaWeb知识梳理(后端部分)

JavaWeb 静态web资源&#xff08;如html 页面&#xff09;&#xff1a;指web页面中供人们浏览的数据始终是不变。 动态web资源&#xff1a;指web页面中供人们浏览的数据是由程序产生的&#xff0c;不同时间点访问web页面看到的内容各不相同。 静态web资源开发技术&#xff1…...

AI:07-基于卷积神经网络的海洋生物的识别

当涉及海洋生物的识别和研究时,基于深度学习的方法已经展现出了巨大的潜力。深度学习模型可以利用大量的图像和标记数据来自动学习特征,并实现高准确度的分类任务。本文将介绍如何使用深度学习技术来实现海洋生物的自动识别,并提供相应的代码示例。 数据收集和预处理 要训…...

centos7下docker设置新的下载镜像源并调整存放docker下载镜像的仓库位置

目录 1.设置镜像源 2.调整存放下载镜像的仓库位置 1.设置镜像源 在 /etc/docker下创建一个daemon.json文件。在json中下入 "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"] 完成配置 加载配置 systemctl daemon-reload 重启docker sy…...

Gitea--私有git服务器搭建详细教程

一.官方文档 https://docs.gitea.com/zh-cn/说明 gitea 是一个自己托管的Git服务程序。他和GitHub, Gitlab等比较类似。他是从 Gogs 发展而来&#xff0c;gitea的创作团队重新fork了代码&#xff0c;并命名为giteagitea 功能特性多&#xff0c;能够满足我们所有的的代码管理需…...

SOLIDWORKS放样是什么意思?

SOLIDWORKS是一款广受欢迎的三维计算机辅助设计&#xff08;CAD&#xff09;软件&#xff0c;提供了许多强大的功能来帮助工程师实现他们的创意。其中一个重要的功能是放样功能&#xff0c;它在设计过程中起着至关重要的作用。本文将介绍SOLIDWORKS放样的概念、特点和应用。 放…...

Xcode打包ipa文件,查看app包内文件

1、Xcode发布ipa文件前&#xff0c;在info中打开如下两个选项&#xff0c;即可在手机上查看app包名文件夹下的文件及数据。...

AJAX学习笔记6 JQuery对AJAX进行封装

AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的&#xff0c;有很多重复的代码&#xff0c;这些重复的代码能不能不写&#xff0c;能不能封装一个工具类。要发送ajax请求的话&#xff0c;就直接调用这个工具类中的相关函数即可。 用J…...

阿里云服务器退款规则_退款政策全解析

阿里云退款政策全解析&#xff0c;阿里云退款分为五天无理由全额退和非全额退订两种&#xff0c;阿里云百科以云服务器为例&#xff0c;阿里云服务器包年包月支持五天无理由全额退订&#xff0c;可申请无理由全额退款&#xff0c;如果是按量付费的云服务器直接释放资源即可。阿…...

ExpressLRS开源之基本调试数据含义

ExpressLRS开源之基本调试数据含义 1. 源由2. 代码2.1 debugRcvrLinkstats2.2 debugRcvrSignalStats 3. 含义解释3.1 ID(packetCounter),Antenna,RSSI(dBm),LQ,SNR,PWR,FHSS,TimingOffset3.2 IRQ_CNT,RSSI_AVE,SNR_AVE,SNV_MAX,TELEM_CNT,FAIL_CNT 4. 总结5. 参考资料 1. 源由 …...

DOM 简介 | 深入了解DOM

目录 一、DOM是什么 二、DOM的访问 三、DOM节点类型 四、DOM的分级 今天我们将了解WEB编程中一个重要的概念DOM&#xff08;Document Object Model&#xff09;文档对象模型&#xff0c;它帮助我们使用JavaScript&#xff08;或其他编程语言&#xff09;操纵文档。 一、DO…...

机器学习丨2. 线性回归(Linear Regression)

Author&#xff1a;AXYZdong 硕士在读 工科男 有一点思考&#xff0c;有一点想法&#xff0c;有一点理性&#xff01; 定个小小目标&#xff0c;努力成为习惯&#xff01;在最美的年华遇见更好的自己&#xff01; CSDNAXYZdong&#xff0c;CSDN首发&#xff0c;AXYZdong原创 唯…...

python+django企业员工考勤打卡信息管理系统66lgr

本员工信息管理系统以Django作为框架&#xff0c;Python语言&#xff0c;B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;员工、部门、员工合同、考勤信息、打卡信息、员工工资等模块。 本文着重阐述了员工信息管理系统的分析、设计与实现&…...

【Java Web】论坛帖子添加评论

数据层 增加评论数据&#xff1b;修改帖子评论数量&#xff1b; 业务层 处理添加评论的业务&#xff1b;先增加评论、在更新帖子的评论数量&#xff1b; 表现层 处理添加评论数据的请求&#xff1b;设置添加评论的表单。 一、数据层 1.1 CommentMapper.java package com.no…...

如何建设一个安全运营中心(SOC)?

然信息安全管理问题主要是个从上而下的问题&#xff0c;不能指望通过某一种工具来解决&#xff0c;但良好的安全技术基础架构能有效的推动和保障信息安全管理。随着国内行业IT应用度和信息安全管理水平的不断提高&#xff0c;企业对于安全管理的配套设施如安全运营中心&#xf…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...