React 全栈体系（二）

第二章 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>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt应用开发(基础篇)——选项卡窗口 QTabWidget

Qt应用开发(基础篇)——选项卡窗口 QTabWidget

一、前言 QTabWidget类继承于QWidget&#xff0c;是一个拥有选项卡的窗口部件。 QTabWidget类有一个选项卡栏QTabBar和一个页面区域&#xff0c;用来显示和选项卡相关联的界面。用户通过点击选项卡或者自定义快捷方式(ALTKey)切换页面。 二、QTabWidget类 1、count 该属…
阅读更多...
文本挖掘 day5：文本挖掘与贝叶斯网络方法识别化学品安全风险因素

文本挖掘 day5：文本挖掘与贝叶斯网络方法识别化学品安全风险因素

文本挖掘与贝叶斯网络方法识别化学品安全风险因素 1. Introduction现实意义理论意义提出方法&#xff0c;目标 2. 材料与方法2.1 数据集2.2 数据预处理2.3 关键字提取2.3.1 TF-IDF2.3.2 改进的BM25——BM25WBM25BM25W 2.3.3 关键词的产生(相关系数) 2.4 关联规则分析2.5 贝叶斯…
阅读更多...
Pytorch源码搜索与分析

Pytorch源码搜索与分析

PyTorch的的代码主要由C10、ATen、torch三大部分组成的。其中&#xff1a; C10 C10&#xff0c;来自于Caffe Tensor Library的缩写。这里存放的都是最基础的Tensor库的代码&#xff0c;可以运行在服务端和移动端。PyTorch目前正在将代码从ATen/core目录下迁移到C10中。C10的代…
阅读更多...
【Java 回忆录】Java全栈开发笔记文档

【Java 回忆录】Java全栈开发笔记文档

这里能学到什么&#xff1f; 实战代码文档一比一记录实战问题和解决方案涉及前端、后端、服务器、运维、测试各方面通过各方面的文档与代码&#xff0c;封装一套低代码开发平台直接开腾讯会议&#xff0c;实实在线一起分享技术问题核心以 Spring Boot 作为基础框架进行整合后期…
阅读更多...
大数据Flink学习圣经：一本书实现大数据Flink自由

大数据Flink学习圣经：一本书实现大数据Flink自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据Flink学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…
阅读更多...
记一次较为详细的某CMS代码审计

记一次较为详细的某CMS代码审计

前言 本次审计的话是Seay昆仑镜进行漏洞扫描 Seay的话它可以很方便的查看各个文件&#xff0c;而昆仑镜可以很快且扫出更多的漏洞点&#xff0c;将这两者进行结合起来&#xff0c;就可以发挥更好的效果。 昆仑镜官方地址 https://github.com/LoRexxar/Kunlun-M 环境 KKC…
阅读更多...
前端笔试+面试分享

前端笔试+面试分享

以下是个人线下面试遇到的真实的题&#xff0c;仅供参考和学习 1. css 选择符有哪些&#xff1f;哪些属性可以继承&#xff1f;优先级算法加何计算&#xff1f; CSS选择符有很多种&#xff0c;例如类型选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。 …
阅读更多...
前端常用算法（一）：防抖+节流

前端常用算法（一）：防抖+节流

目录 第一章 防抖 1.1 防抖&#xff08;debounce&#xff09;简介 1.2 应用场景 1.3 实现思路 1.4 手撕防抖代码 第二章 节流 2.1 节流&#xff08;throttle&#xff09;简介 2.2 应用场景 2.3 实现思路 2.4 手撕节流代码&#xff08;方法&#xff1a;时间戳和计时器…
阅读更多...
简单的洗牌算法

简单的洗牌算法

目录 前言 问题 代码展现及分析 poker类 game类 Text类 前言 洗牌算法为ArrayList具体使用的典例&#xff0c;可以很好的让我们快速熟系ArrayList的用法。如果你对ArrayList还不太了解除&#xff0c;推荐先看本博主的ArrayList的详解。 ArrayList的详解_WHabcwu的博客-CSD…
阅读更多...
数据结构——链表详解

数据结构——链表详解

链表 文章目录 链表前言认识链表单链表结构图带头单循环链表结构图双向循环链表结构图带头双向循环链表结构图 链表特点 链表实现(带头双向循环链表实现)链表结构体(1) 新建头节点(2) 建立新节点(3)尾部插入节点(4)删除节点(5)头部插入节点(6) 头删节点(7) 寻找节点(8) pos位置…
阅读更多...
C语言之feof与fgetc应用实例(八十一)

C语言之feof与fgetc应用实例(八十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
常见的Web安全漏洞有哪些，Web安全漏洞常用测试方法介绍

常见的Web安全漏洞有哪些，Web安全漏洞常用测试方法介绍

Web安全漏洞是指在Web应用程序中存在的可能被攻击者利用的漏洞&#xff0c;正确认识和了解这些漏洞对于Web应用程序的开发和测试至关重要。 一、常见的Web安全漏洞类型&#xff1a; 1、跨站脚本攻击(Cross-Site Scripting&#xff0c;XSS)&#xff1a;攻击者通过向Web页面注入…
阅读更多...
雷布斯才是我爱的那斯

雷布斯才是我爱的那斯

在知乎看到一个提问&#xff0c;说谁是程序员的天花板&#xff0c;我想了下&#xff0c;雷布斯可能真的是我辈楷模。 不过讲真&#xff0c;雷布斯我们可能是超越不了的了&#xff0c;不管是作为程序员还是作为老板&#xff0c;雷布斯都比普通人牛逼一大截。 还有&#xff0c;创…
阅读更多...
解决hbase节点已下线，但在status中显示为dead问题

解决hbase节点已下线，但在status中显示为dead问题

工作中需要下线4台hbase小节点&#xff0c;下线完成后使用status 命令查看,有一台为dead状态: 使用status detailed 查看&#xff0c;发现“hd-03"这台节点是dead。 检查各节点配置文件无误&#xff0c;并使用 /opt/hbase/bin/hbase-daemon.sh restart master 重启两个…
阅读更多...
数据生成 | MATLAB实现WGAN生成对抗网络数据生成

数据生成 | MATLAB实现WGAN生成对抗网络数据生成

数据生成 | MATLAB实现WGAN生成对抗网络数据生成 目录 数据生成 | MATLAB实现WGAN生成对抗网络数据生成生成效果基本描述程序设计参考资料 生成效果 基本描述 1.WGAN生成对抗网络&#xff0c;数据生成&#xff0c;样本生成程序&#xff0c;MATLAB程序&#xff1b; 2.适用于MATL…
阅读更多...
一篇文章了解Java spring中bean的生命周期！

一篇文章了解Java spring中bean的生命周期！

一.介绍在Java spring中bean的生命周期 1.什么是 Bean&#xff1f; 我们来看下 Spring Framework 的官方文档&#xff1a; In Spring, the objects that form the backbone of your application and that are managed by the Spring IoC container are called beans. A bean …
阅读更多...
【第二阶段】kotlin函数引用

【第二阶段】kotlin函数引用

针对上篇传入函数参数我们也可以重新定义一个函数&#xff0c;然后在main中调用时传入函数对象 lambda属于函数类型的对象&#xff0c;需要把普通函数变成函数类型的对象&#xff08;函数引用&#xff09;&#xff0c;使用“&#xff1a;&#xff1a;” /*** You can edit, ru…
阅读更多...
新能源电动车充电桩控制主板安全特点

新能源电动车充电桩控制主板安全特点

新能源电动车充电桩控制主板安全特点 你是否曾经担心过充电桩的安全问题?充电桩主板又是什么样的呢?今天我们就来聊聊这个话题。 充电桩主板采用双重安全防护系统&#xff0c;包括防水、防护、防尘等&#xff0c;确保充电桩安全、可靠。不仅如此&#xff0c;充电桩主板采用先…
阅读更多...
前端技术Vue学习笔记--004

前端技术Vue学习笔记--004

Vue学习 文章目录 Vue学习一、scoped解决样式冲突二、data必须是一个函数三、组件通信3.1、组件关系3.2、组件通信解决方案3.3、父传子通信3.4、子传父通信3.5、组件通信案例 四、prop语法4.1、prop语法基础语法4.2、 <font color blue>prop校验4.3、prop&data、单向…
阅读更多...
rabbitMQ服务自动停止（已解决

rabbitMQ服务自动停止（已解决

1、 在rabbitmq的sbin目录下操作 rabbitmq-plugins enable rabbitmq_management 2、 自己去rabbitmq_server-3.7.5文件夹下创建一个data&#xff0c;再执行这个命令&#xff08;用自己的目录哈 set RABBITMQ_BASED:\RabbitTools\RabbitMQ\rabbitmq_server-3.7.5\data 然后去配…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023