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

React 全栈体系（二）

news 2026/1/20 3:41:51

第二章 React面向组件编程

一、基本理解和使用

1. 使用React开发者工具调试

请添加图片描述

2. 效果

2.1 函数式组件

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_函数式组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建函数式组件function MyComponent(){console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>

2.2 复习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类的基本知识</title>
</head>
<body><script type="text/javascript" >/* 总结：1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。*///创建一个Person类class Person {//构造器方法constructor(name,age){//构造器中的this是谁？—— 类的实例对象this.name = namethis.age = age}//一般方法speak(){//speak方法放在了哪里？——类的原型对象上，供实例使用//通过Person实例调用speak时，speak中的this就是Person实例console.log(`我叫${this.name}，我年龄是${this.age}`);}}//创建一个Student类，继承于Person类class Student extends Person {constructor(name,age,grade){super(name,age)this.grade = gradethis.school = '小帽学堂'}//重写从父类继承过来的方法speak(){console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);this.study()}study(){//study方法放在了哪里？——类的原型对象上，供实例使用//通过Student实例调用study时，study中的this就是Student实例console.log('我很努力的学习');}}class Car {constructor(name,price){this.name = namethis.price = price// this.wheel = 4}//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1a = 1wheel = 4static demo = 100}const c1 = new Car('奔驰c63',199)console.log(c1);console.log(Car.demo);</script>
</body>
</html>

2.3 类式组件

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_类式组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建类式组件class MyComponent extends React.Component {render(){//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。console.log('render中的this:',this);return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>}}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>

3. 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

4. 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

二、组件三大核心属性1: state

1. 效果

需求: 定义一个展示天气信息的组件
- 默认展示天气炎热或凉爽
- 点击文字切换天气

2. 复习

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>原生事件绑定</title></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><button onclick="demo()">按钮3</button><script type="text/javascript" >const btn1 = document.getElementById('btn1')btn1.addEventListener('click',()=>{alert('按钮1被点击了')})const btn2 = document.getElementById('btn2')btn2.onclick = ()=>{alert('按钮2被点击了')}function demo(){alert('按钮3被点击了')}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>类方法中的this指向</title></head><body><script type="text/javascript" >class Person {constructor(name,age){this.name = namethis.age = age}study(){//study方法放在了哪里？——类的原型对象上，供实例使用//通过Person实例调用study时，study中的this就是Person实例console.log(this);}}const p1 = new Person('tom',18)p1.study() //通过实例调用study方法const x = p1.studyx()</script></body>
</html>

3. 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

4. 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
- 强制绑定this: 通过函数对象的bind()
- 箭头函数
状态数据，不能直接修改或更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建组件class Weather extends React.Component{//构造器调用几次？ ———— 1次constructor(props){console.log('constructor');super(props)//初始化状态this.state = {isHot:false,wind:'微风'}//解决changeWeather中this指向问题this.changeWeather = this.changeWeather.bind(this)}//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数render(){console.log('render');//读取状态const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}//changeWeather调用几次？ ———— 点几次调几次changeWeather(){//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefinedconsole.log('changeWeather');//获取原来的isHot值const isHot = this.state.isHot//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。this.setState({isHot:!isHot})console.log(this);//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！//this.state.isHot = !isHot //这是错误的写法}}//2.渲染组件到页面ReactDOM.render(<Weather/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state简写方式</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建组件class Weather extends React.Component{//初始化状态state = {isHot:false,wind:'微风'}render(){const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}//自定义方法————要用赋值语句的形式+箭头函数changeWeather = ()=>{const isHot = this.state.isHotthis.setState({isHot:!isHot})}}//2.渲染组件到页面ReactDOM.render(<Weather/>,document.getElementById('test'))</script>
</body>
</html>

三、组件三大核心属性2: props

1. 效果

需求: 自定义用来显示一个人员信息的组件
- 姓名必须指定，且为字符串类型；
- 性别为字符串类型，如果性别没有指定，默认为男
- 年龄为字符串类型，且为数字类型，默认值为18

2. 理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

3. 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

4. 编码操作

4.1 内部读取某个属性值

this.props.name

4.2 对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {name: React.PropTypes.string.isRequired,age: React.PropTypes.number
}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {name: PropTypes.string.isRequired,age: PropTypes.number
}

4.3 扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

4.4 默认属性值

Person.defaultProps = {age: 18,sex:'男'
}

4.5 组件类的构造函数

constructor(props){super(props)console.log(props)//打印所有属性
}

5. 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>props基本使用</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Person extends React.Component{render(){// console.log(this);const {name,age,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}}//渲染组件到页面ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))const p = {name:'老刘',age:18,sex:'女'}// console.log('@',...p);// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))</script>
</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>展开运算符</title></head><body><script type="text/javascript" >let arr1 = [1,3,5,7,9]let arr2 = [2,4,6,8,10]console.log(...arr1); //展开一个数组let arr3 = [...arr1,...arr2]//连接数组//在函数中使用function sum(...numbers){return numbers.reduce((preValue,currentValue)=>{return preValue + currentValue})}console.log(sum(1,2,3,4));//构造字面量对象时使用展开语法let person = {name:'tom',age:18}let person2 = {...person}//console.log(...person); //报错，展开运算符不能展开对象person.name = 'jerry'console.log(person2);console.log(person);//合并let person3 = {...person,name:'jack',address:"地球"}console.log(person3);</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对props进行限制</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//创建组件class Person extends React.Component{render(){// console.log(this);const {name,age,sex} = this.props//props是只读的//this.props.name = 'jack' //此行代码会报错，因为props是只读的return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}}//对标签属性进行类型、必要性的限制Person.propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值speak:PropTypes.func,//限制speak为函数}//指定默认标签属性值Person.defaultProps = {sex:'男',//sex默认值为男age:18 //age默认值为18}//渲染组件到页面ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))const p = {name:'老刘',age:18,sex:'女'}// console.log('@',...p);// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))function speak(){console.log('我说话了');}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>props的简写形式</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//创建组件class Person extends React.Component{constructor(props){//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props// console.log(props);super(props)console.log('constructor',this.props);}//对标签属性进行类型、必要性的限制static propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值}//指定默认标签属性值static defaultProps = {sex:'男',//sex默认值为男age:18 //age默认值为18}render(){// console.log(this);const {name,age,sex} = this.props//props是只读的//this.props.name = 'jack' //此行代码会报错，因为props是只读的return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}}//渲染组件到页面ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数组件使用props</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//创建组件function Person (props){const {name,age,sex} = propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)}Person.propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值}//指定默认标签属性值Person.defaultProps = {sex:'男',//sex默认值为男age:18 //age默认值为18}//渲染组件到页面ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))</script>
</body>
</html>

React 全栈体系（二）

第二章 React面向组件编程一、基本理解和使用 1. 使用React开发者工具调试 2. 效果 2.1 函数式组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>1_函数式组件</title> </head> &l…...

编程日记 2023/8/25 3:46:53

【Linux】socket编程(二)

目录前言 TCP通信流程 TCP通信的代码实现 tcp_server.hpp编写 tcp_server.cc服务端的编写 tcp_client.cc客户端的编写整体代码前言上一章我们主要讲解了UDP之间的通信，本章我们将来讲述如何使用TCP来进行网络间通信，主要是使用socket API进…...

编程日记 2023/8/25 3:45:50

七大出海赛道解读，亚马逊云科技为行业客户量身打造解决方案

伴随全球化带来的新机遇和国内市场的进一步趋于饱和，近几年，中国企业出海快速升温，成为了新的创业风口和企业的第二增长曲线。从范围上看，出海市场由近及远，逐步扩张。从传统的东南亚市场，到成熟的北美、欧…...

编程日记 2023/8/25 3:44:49

【Maven教程】（三）基础使用篇：入门使用指南——POM编写、业务代码、测试代码、打包与运行、使用Archetype生成项目骨架~

Maven基础使用篇 1️⃣ 编写 POM2️⃣ 编写业务代码3️⃣ 编写测试代码4️⃣ 打包和运行5️⃣ 使用 Archetype生成项目骨架 1️⃣ 编写 POM 到目前为止，已经大概了解并安装好了Maven环境, 现在，我们开始创建一个最简单的 Hello World 项目。如果你是初次…...

编程日记 2023/8/25 3:43:46

Spring Boot + Spring Data JPA 实现数据库操作的标准示例

环境搭建本篇使用H2内存数据库演示Spring Data JPA 的使用。导入JPA和H2的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><…...

编程日记 2023/8/25 3:42:44

JVM——类加载器

回顾一下类加载过程类加载过程：加载->连接->初始化。连接过程又可分为三步:验证->准备->解析。一个非数组类的加载阶段（加载阶段获取类的二进制字节流的动作）是可控性最强的阶段，这一步我们可以去完成还可以自定义…...

编程日记 2023/8/25 3:41:43

async/await 编程理解

博客主要是参考 Asynchronous Programming in Rust ，会结合简单的例子，对 async 和 await 做比较系统的理解，如何使用 async 和 await 是本节的重点。 async 和 await 主要用来写异步代码，async 声明的代码块实现了 Future 特性&a…...

编程日记 2023/8/25 3:40:42

1. Java基础知识介绍

文章目录 1. Java基础知识介绍1. 简单输入输出1.1 输入1.2 输出 2. 数据类型2.1 基本数据类型2.2 引用数据类型 3. 函数4. 类基础知识5. 小结 1. Java基础知识介绍 1. 简单输入输出在Java编程中，我们经常需要与用户进行交互，以获取输入并输出结果。Ja…...

编程日记 2023/8/25 3:39:40

基础shell小技巧01

1. 命令替换 shell脚本中最有用的特性之一是可以从命令输出中提取信息并将其赋给变量。把输出赋给变量之后，就可以随意在脚本中使用了。在脚本中处理数据时，这个特性显得尤为方便。有两种方法可以将命令输出赋给变量。反引号（&#xff0…...

编程日记 2023/8/25 3:38:36

微信小程序--data的赋值与取值的几种方式

通过小程序官方文档可知： 赋值一定需要注意。需要setData的使用，这样页面才刷新，数据才会改变，并且分清that和this的使用 Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事…...

编程日记 2023/8/25 3:37:35

条码通讯配置

由Leuze（劳易测） LSIS 222 M5M-R1/MA208i系统组成连接说明及器件明细： 打开条码调试软件BPS Configuration tool对M208i进行ip 和端口号进行配置，条码选择作为客户端，输入ip和端口号，选择串口通讯波特…...

编程日记 2023/8/25 3:36:34

知网G4期刊《高考》简介及投稿要求

知网G4期刊《高考》简介及投稿要求一、《高考》期刊简介： 主管单位：长春市委宣传部主办单位：长春出版社国内刊号22-1372/G4 国际刊号1673-6265 代号12-240 编辑单位：《高考》杂志社出版周期：旬刊类 …...

编程日记 2023/8/25 3:35:32

第7章 CPU前端优化

接下来讨论如何使用CPU监控特性寻找CPU上运行的代码中可被调优的位置。标准的算法和数据结构在性能敏感型工作负载并不总能表现的很好。例如，在“扁平化”数据结构的冲击下，链表基本上快被放弃了。传统链表中的每个节点都是动态分配的，除了…...

编程日记 2023/8/25 3:34:28

idea新建Java-maven项目时，出现Dependency‘xxx（jar包名）‘ not found的解决方案

项目场景： 项目场景：使用idea创建maven项目时，导入简单依赖时（本文以mysql-connector-java为例）。问题描述问题： 首先，在创建新的maven项目中，出现下列两种情况： &am…...

编程日记 2023/8/25 3:33:25

STM32--USART串口

文章目录通信接口串口通信硬件电路电平标准参数时序 USART主要特性框图数据帧发送器波特率发生器SWART串口发送与接收工程串口收发数据包通信接口通信接口是指连接中央处理器（CPU）和标准通信子系统之间的接口，用于实现数据和控制信息在不…...

编程日记 2023/8/25 3:32:23

2023年Java毕业设计题目推荐，怎样选题？500道毕业设计题目推荐

大家好，我是程序员徐师兄，最近有很多同学咨询，说毕业设计了，不知道选怎么题目好，有哪些是想需要注意的。今天，我整理了一些Java毕业设计的题目,可以参考一下，希望对大家有所帮助文章目录一、…...

编程日记 2023/8/25 3:31:22

基于数据湖的多流拼接方案-HUDI概念篇

目录一、为什么需要HUDI？ 1. 传统技术选型存在哪些问题？ 2. Hudi有什么优点？ 基于 Hudi Payload 机制的多流拼接方案： 二、HUDI的应用场景 1. 什么场景适合使用hudi？ 2. 什么场景不适合使用hudi？ …...

编程日记 2023/8/25 3:30:20

OpenCV基础知识（5）— 几何变换

前言：Hello大家好，我是小哥谈。OpenCV中的几何变换是指改变图像的几何结构，例如大小、角度和形状等，让图像呈现出缩放、翻转、旋转和透视效果。这些几何变换操作都涉及复杂、精密的计算。OpenCV将这些计算过程都封装成了非常灵活的…...

编程日记 2023/8/25 3:29:17

Linux下源码安装MySQL 8.0

MySQL 8.0源码安装环境准备步骤环境准备 Linux环境，本文基于CentOS 8 MySQL安装包，本文基于MySQL 8.1，以下为带boost MySQL 8.1源码下载地址： https://dev.mysql.com/get/Downloads/MySQL-8.1/mysql-boost-8.1.0.tar.gz 步骤…...

编程日记 2023/8/25 3:28:14

大聪明教你学Java | 深入浅出聊 Java 内存模型

前言 🍊作者简介：不肯过江东丶，一个来自二线城市的程序员，致力于用“猥琐”办法解决繁琐问题，让复杂的问题变得通俗易懂。 🍊支持作者：点赞👍、关注💖、留言💌~ 在多线程环境下，多个线程同时访问共享数据可能导致一系列问题，如数据不一致、竞态条件和死锁等…...

编程日记 2023/8/25 3:27:13

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/1/19 11:25:31

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/15 5:04:23

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/15 4:58:55

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2026/1/15 6:53:05

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/15 4:57:44

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/18 9:22:06

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种）方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

第二章 React面向组件编程

一、基本理解和使用

1. 使用React开发者工具调试

2. 效果

2.1 函数式组件

2.2 复习

2.3 类式组件

3. 注意

4. 渲染类组件标签的基本流程

二、组件三大核心属性1: state

1. 效果

2. 复习

3. 理解

4. 强烈注意

三、组件三大核心属性2: props

1. 效果

2. 理解

3. 作用

4. 编码操作

4.1 内部读取某个属性值

4.2 对props中的属性值进行类型限制和必要性限制

4.3 扩展属性: 将对象的所有属性通过props传递

4.4 默认属性值

4.5 组件类的构造函数

5. 代码

相关文章：