当前位置: 首页 > 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…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...