React基础知识笔记

Reat简介

React:用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。是一个将视图渲染为html视图的开源库

第一章:React入门

相关js库

  • react.development.js :React 核心库
  • react-dom.development.js :提供 DOM 操作的 React 扩展库
  • babel.min.js :解析 JSX 语法(js语法糖),转换为 JS 代码
    <!-- 准备好一个“容器” --><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><!-- 此处一定要写babel,表示写的不是 JS,而是 JSX,并且靠 babel 翻译 --><script type="text/babel">//1.创建虚拟DOM 此处是JSX 不要写引号,因为不是字符串const VDOM = <h1>Hello,React</h1>//2.渲染虚拟DOM到页面// 导入核心库和扩展库后,会有 React 和 ReactDOM 两个对象ReactDOM.render(VDOM, document.getElementById('test'))</script>

创建VDOM的两种方式

第一种 jsx方式(推荐).

    <div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建虚拟DOM const VDOM = (<h1><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>

第二种原生js方式

    <div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script>//原生js不用写babel<script type="text/javascript">//1.创建虚拟DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>

VDOM | DOM

关于虚拟 DOM:

  • 本质是 Object 类型的对象(一般对象)
  • 虚拟 DOM 比较“轻”,真实 DOM 比较“重”,因为虚拟 DOM 是 React 内部在用,无需真实 DOM 上那么多的属性。
  • 虚拟 DOM 最终会被 React 转化为真实 DOM,呈现在页面上。
    <script type="text/babel">//1.创建虚拟DOM const VDOM = (<h1><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))console.log('VDOM',VDOM); // VDOM {...}是一个对象console.log('TDOM',document.querySelect('#test')); // TDOM <div>...</div>(真实DOM)console.log(typeof VDOM); // objectconsole.log(VDOM instanceof Object); // true</script>

React JSX

  • 全称:JavaScript XML
  • React 定义的类似于 XML 的 JS 扩展语法;本质是 React.createElement() 方法的语法糖
  • 作用:简化创建虚拟 DOM
  • 补充:js中,JSON的序列化和反序列化使用parse()/stringify()

JSX 语法规则

  • 定义虚拟 DOM 时,不要写引号
  • 标签中混入 JS 表达式需要使用 {}
  • 指定类名不用 class,使用 className
  • 内联样式,使用 style={{ key: value }} 的形式
  • 只能有一个根标签
  • 标签必须闭合,单标签结尾必须添加 /:<input type="text" />
  • 标签首字母小写,则把标签转换为 HTML 对应的标签,若没有,则报错
  • 标签首字母大写,则渲染对应组件,若没有定义组件,则报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>jsx语法规则</title><style>.title {background-color: orange;width: 200px;}</style></head><body><div id="test"></div>...<script type="text/babel">const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'const VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{ color: 'white', fontSize: '19px' }}>{myData.toLowerCase()}</span></h2><input type="text" />// <good>very good</good>// <Child></Child></div>)ReactDOM.render(VDOM, document.getElementById('test'))</script></body>
</html>

补充:表达式与语句(代码)的区别.

表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方(如数值处理等)

   aa+bdemo(1)arr.map() //可以遍历的时候使用function test () {}

语句(代码),下面这些都是语句(如逻辑判断语句)

  if(){}for(){}switch(){case:xxxx}

第二章:React面向组件

创建组件的两种方式

函数式组件

    <div id="app"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 创建函数式组件function Demo() {console.log(this) //babel编译后开启严格模式 此处的this是undefindreturn <h1>函数式组件,适用于简单组件的创建</h1>}// 挂载组件ReactDOM.render(<Demo/>,document.querySelector("#app"))</script>

要点:

  • 组件名称首字母必须大写,否则会解析成普通标签导致报错(JSX 语法规则)
  • 函数需返回一个虚拟 DOM
  • 渲染组件时需要使用标签形式,同时标签必须闭合

渲染组件的过程:

1、React 解析标签,寻找对应组件
2、发现组件是函数式组件,则调用函数,将返回的虚拟 DOM 转换为真实 DOM ,并渲染到页面中

类式组件

类的基本知识

    <script type="text/javascript">/*总结:1. 类的实例不是必须写的,需要对类进行初始化操作,如添加指定属性时才写2. 子类继承父类,子类中写了构造器,那么子类构造器中的super是必须要调用的3. 类中定义的方法都是放在了类的原型对象上,供实例去使用4. 实例调用子类的方法时,找不到会去父类的原型对象上去找,一直找到顶级window对象*/class Person {// 构造器方法constructor(name,age) {// 构造器中的this指向类的实例对象(constructor是一个函数,由实例对象调用,所以this指向实例对象)this.name = namethis.age = age}// 一般方法speak() {// 放在了类的原型对象上,供实例使用// 通过Person实例调用speak方法时,speak中的this指向Person实例console.log(`我的名字叫${this.name},今年${this.age}岁了`);}}// Student类继承与Person类class Student extends Person {constructor(name,age,id) {super(name,age)this.id = id}// 重写从父类继承的方法speak() {console.log(`我的名字叫${this.name},今年${this.age}岁了,编号为${this.id}`);}}const p1 = new Person('张三',18)p1.speak()const s1 = new Student('李四',16,'30461')s1.speak()</script>

组件渲染过程:

  • React 解析组件标签,寻找组件
  • 发现是类式组件,则 new 该类的实例对象,通过实例调用原型上的 render 方法
  • 将 render 返回的虚拟 DOM 转为真实 DOM ,渲染到页面上
//创建类式组件
class MyComponent extends React.Component {render() {return <h2>我是用类定义的组件</h2>}}
//渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

第三章: 组件实例的核心属性

核心属性1:state | 状态

state 是组件实例对象最重要的属性,值为对象。又称为状态机,通过更新组件的 state 来更新对应的页面显示。

要点:

  • 初始化 state
  • React 中事件绑定
  • this 指向问题
  • setState 修改 state 状态
  • constructor 、render 、自定义方法的调用次数

标准写法:

    <script type="text/babel">class Weather extends React.Component {//构造器调用1次constructor(props) {super(props) // 初始化状态this.state = {isHot:true}// 解决changeWeather中的this指向问题this.change = this.changeWeather.bind(this)}render() {//render调用n+1次// 读取状态const {isHot} = this.state // 这里的this指向原型对象// return <h1 onClick={this.changeWeather}>今天天气{isHot?'凉爽':'炎热'}</h1>// 这里的this指向实例自身return <h1 onClick={this.change}>今天天气{isHot ? '炎热' :'凉爽' }</h1>}changeWeather() {//点几次changeWeather调用几次// changeWeather放在实例对象的原型上,供实例使用// changeWeather作为onClick的回调函数使用,不是通过实例调用,是直接调用// 类中的方法默认开启了严格模式,this指向丢失// 状态不可直接更改,必须借助React内置API// this.state.isHot = !this.state.isHotthis.setState({isHot:!this.state.isHot})}}function demo() {// 修改状态}ReactDOM.render(<Weather/>,document.querySelector('#app'))</script>

简写:

    <script type="text/babel">// 创建组件class Weather extends React.Component {// 初始化状态state = {isHot:true}render() {// 读取状态const {isHot} = this.state return <h1 onClick={this.changeWeather}>今天天气{isHot ? '炎热' :'凉爽' }</h1>}// 自定义方法 -- 赋值语句+箭头函数(中的this指向上下文中的this)changeWeather = ()=>{this.setState({isHot:!this.state.isHot})}}ReactDOM.render(<Weather/>,document.querySelector('#app'))</script>

核心属性2:props | 标签属性

每个组件对象都有 props 属性,组件标签的属性都保存在 props 中。(注意:props 是只读的,不能修改。)

标准写法:

    <script type="text/babel">// 创建组件class Person extends React.Component {render() {const {name,age,sex} = this.propsreturn (<div><h1>{name}</h1><h2>{age}</h2><h2>{sex}</h2></div>)}}// 渲染组件// ReactDOM.render(<Person name="张三" age="18" sex="1"/>,document.querySelector('#app'))// 批量传递props/批量传递标签属性const obj = {name:"张三",age:18,sex:"男"}ReactDOM.render(<Person {...obj}/>,document.querySelector('#app'))</script>
  • 限制标签属性 在 React 15.5 以前,React 身上有一个 PropTypes 属性可直接使用,即 name:React.PropTypes.string.isRequired ,没有把 PropTypes 单独封装为一个模块。
    <div id="app1"></div><div id="app2"></div><div id="app3"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-type 用于限制props属性标签 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">// 假数据const obj = {name:"张三",age:18,sex:"男"}// 创建组件class Person extends React.Component {render() {const {name,age,sex} = this.propsreturn (<div><span>{name}</span><span>{age}</span><span>{sex}</span></div>)}}// 对标签属性进行限制Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}Person.defaultProps = {age:18,//指定age默认值sex:'保密'//指定sex默认值}function speak() {console.log('hello');}// 渲染组件ReactDOM.render(<Person name="李四" age={20} sex="男" speak={speak}/>,document.querySelector('#app1'))ReactDOM.render(<Person name="李五"/>,document.querySelector('#app3'))// 批量传递props/批量传递标签属性ReactDOM.render(<Person {...obj}/>,document.querySelector('#app2'))</script>

函数式组件使用props:

    <script type="text/babel">// 假数据const obj = {name:"张三",age:18,sex:"男"}// 创建组件function Person(props) {const {name,age,sex} = propsreturn (<div><h1>{name}</h1><h2>{age}</h2><h2>{sex}</h2></div>)}// 对标签属性进行限制Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}Person.defaultProps = {age:18,//指定age默认值sex:'保密'//指定sex默认值}ReactDOM.render(<Person {...obj}/>,document.querySelector('#app2'))</script>

简写形式:

    <!-- 引入prop-type 用于限制props属性标签 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">// 假数据const obj = {name:"张三",age:18,sex:"男"}// 创建组件class Person extends React.Component {render() {const {name,age,sex} = this.propsreturn (<div><span>{name}</span><span>{age}</span><span>{sex}</span></div>)}// 对标签属性进行限制static propTypes = {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}static defaultProps = {age:18,//指定age默认值sex:'保密'//指定sex默认值}}function speak() {console.log('hello');}// 渲染组件ReactDOM.render(<Person name="李四" age={20} sex="男" speak={speak}/>,document.querySelector('#app1'))ReactDOM.render(<Person name="李五"/>,document.querySelector('#app3'))// 批量传递props/批量传递标签属性ReactDOM.render(<Person {...obj}/>,document.querySelector('#app2'))</script>

核心属性3:refs | 标识符

通过定义 ref 属性可以给标签添加标识。

1、字符串形式的ref(这种形式已过时,效率不高,官方不建议使用。)

<script type="text/babel">class Demo extends React.Component {showData = ()=>{const {input1,innput2} = this.refsconsole.log(input1);}render() {return (<div><input ref="input1" type="text"/><br/><br/><button onClick={this.showData}>点击确认文字</button><input ref="input2" type="text"/></div>)}}ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

2、回调函数形式的ref(便捷 使用最多
要点:

  • currentNode => this.input1 = currentNode 就是给组件实例添加 input1 属性,值为节点
  • 由于是箭头函数,因此 this 是 render 函数里的 this ,即组件实例
  • 回调ref中调用次数问题:原文(如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数null,然后第二次会传入参数 DOM 元素。见官方文档)
    <script type="text/babel">class Demo extends React.Component {showData = ()=>{const {input1,input2} = thisconsole.log(input1);}render() {return (<div><input ref={(currentNode) => {this.input1=currentNode}} type="text"/><br/><br/><button onClick={this.showData}>点击确认文字</button><input ref="input2" type="text"/></div>)}}ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

3、createRef API(官方推荐使用) 该方式通过调用 React.createRef 返回一个容器(对象)用于存储节点,且一个容器只能存储一个节点。

    <script type="text/babel">class Demo extends React.Component {myRef = React.createRef()myRef2 = React.createRef()showData = ()=>{console.log(this.myRef);//{current: input}alert(this.myRef.current.value)}render() {return (<div><input ref={this.myRef} type="text"/><input ref={this.myRef2} type="text"/>//测试的,没加事件<br/><br/><button onClick={this.showData}>点击确认文字</button></div>)}}ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

事件处理

  • React 使用自定义事件,而非原生 DOM 事件,即 onClick、onBlur :为了更好的兼容性
  • React 的事件通过事件委托方式进行处理:为了高效
  • 通过 event.target 可获取触发事件的 DOM 元素:勿过度使用 ref 当触发事件的元素和需要操作的元素为同一个时,可以不使用ref :
class Demo extends React.Component {showData2 = (event) => {alert(event.target.value)}render() {return (<div><input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;</div>)}
}

受控组件&非受控组件

非受控组件:现用现取。即需要使用时,再获取节点得到数据 受控组件:类似于 Vue 双向绑定的从视图层绑定到数据层(推荐使用,因为非受控组件需要使用大量的 ref 。)

    <script type="text/babel">class Demo extends React.Component {handleSubmit = (event) => {event.preventDefault() //阻止表单默认提交const {username,password} = thisalert(`${username.value},${password.value}`)}render() {return (<form action="" onSubmit={this.handleSubmit}>用户名:<input ref={c => this.username = c} type="text"/>密码:  <input ref={c => this.password = c} type="password"/><button>登录</button></form>)}}ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

受控组件

<script type="text/babel">class Demo extends React.Component {state = {username:'1',password:'2'}saveUsername = (event)=>{this.setState({username:event.target.value})}savePassword = (event)=>{this.setState({password:event.target.value})}handleSubmit = (event) => {event.preventDefault() //阻止表单默认提交const {username,password} = this.statealert(`${username},${password}`)}render() {return (<form action="" onSubmit={this.handleSubmit}>用户名:<input onChange = {this.saveUsername} type="text"/>密码:  <input onChange = {this.savePassword} type="password"/><button>登录</button></form>)}}ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

补充:高阶函数&函数柯里化

**高阶函数:**参数为函数或者返回一个函数的函数,常见的如 Promise、setTimeout、Array.map()等
函数柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式 使用高阶函数简化受控组件

    <script type="text/babel">class Demo extends React.Component {// 初始化statestate = {username:'1',password:'2'}// 自定义事件saveFormData = (dateType)=>{return (event) => {this.setState({[dateType]:event.target.value})}}handleSubmit = (event) => {event.preventDefault() //阻止表单默认提交const {username,password} = this.statealert(`${username},${password}`)}render() {return (<form action="" onSubmit={this.handleSubmit}>用户名:<input onChange = {this.saveFormData('username')} type="text"/>密码:  <input onChange = {this.saveFormData('password')} type="password"/><button>登录</button></form>)}}// 渲染组件ReactDOM.render(<Demo/>,document.querySelector('#app'))</script>

第四章: 生命周期(新)

在这里插入图片描述

1、初始化阶段

ReactDOM.render()触发 —— 初次渲染

  • constructor() —— 类组件中的构造函数
  • static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增】,即state的值在任何时候都取决于props
  • render() —— 挂载组件
  • componentDidMount() —— 组件挂载完成 比较常用

2、更新阶段

由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()

  • getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】
  • shouldComponentUpdate() —— 组件是否应该被更新(默认返回true)
  • render() —— 挂载组件
  • getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】,就是捕捉更新前的状态
  • componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新

3、卸载组件

ReactDOM.unmountComponentAtNode()触发

  • componentWillUnmount() —— 组件即将卸载
**    <script type="text/babel">class Demo extends React.Component {state = {newsArr:[]}componentDidMount() {setInterval(() => {// 获取状态let {newsArr} = this.stateconst news = '列表'+(newsArr.length+1)// 更新状态this.setState({newsArr:[news,...newsArr]})}, 1000);}getSnapshotBeforeUpdate() {return this.refs.list.scrollHeight}componentDidUpdate(preProps,preState,height) {this.refs.list.scrollTop += this.refs.list.scrollHeight - height}render() {return (<div><ul className="list" ref="list">{this.state.newsArr.map((n,index) => {return <li key={index} className="news">{n}</li>})} </ul></div>)}}ReactDOM.render(<Demo/>,document.querySelector("#app"))</script>**

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

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

相关文章

【分享】3种方法取消PPT的“限制保护”

PPT如果设置了有密码的“只读方式”&#xff0c;每次打开PPT&#xff0c;都会出现对话框&#xff0c;提示需要输入密码才能修改文件&#xff0c;否则只能以“只读方式”打开。 以“只读方式”打开的PPT就会被限制&#xff0c;无法进行编辑修改等操作。那如果后续不需要“限制保…

【Linux进程篇】Linux进程管理——进程创建与终止

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 目录 进程创建 fork函数初识 写时拷贝 fork常规用法 fork调用失败的原因 进程终止 进程退出场景 _exit函数 exit函数 return退出 进程创建 fork函数初识 在linux中fork函数时非常重要的函数&#xff0c;它从已…

Python Selenium 详解:实现高效的UI自动化测试

落日余辉&#xff0c;深情不及久伴。大家好&#xff0c;在当今软件开发的世界中&#xff0c;自动化测试已经成为保障软件质量和快速迭代的重要环节。而在自动化测试的领域中&#xff0c;UI自动化测试是不可或缺的一部分&#xff0c;它可以帮助测试团队快速验证用户界面的正确性…

huggingface的self.state与self.control来源(TrainerState与TrainerControl)

文章目录 前言一、huggingface的trainer的self.state与self.control初始化调用二、TrainerState源码解读(self.state)1、huggingface中self.state初始化参数2、TrainerState类的Demo 三、TrainerControl源码解读(self.control)总结 前言 在 Hugging Face 中&#xff0c;self.s…

Kong网关的负载均衡

安装java环境 查询 java安装包 196 yum list java* 安装java8197 yum install -y java-1.8.0-openjdk.x86_64 检验java8是否安装成功。198 java -version2个tomcat准备 另外一个tomcat区别在于&#xff1a;配置文件。conf/server.xml 启动tomcat [rootlocalhost bin]# ./…

JDBC使用步骤-小白入门

一.JDBC开发流程 加载并注册JDBC驱动创建数据库连接创建Statement对象遍历查询结果关闭连接,释放资源 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement;public class StandardJDBCSample {public static …

【busybox记录】【shell指令】unlink

目录 内容来源&#xff1a; 【GUN】【unlink】指令介绍 【busybox】【unlink】指令介绍 【linux】【unlink】指令介绍 使用示例&#xff1a; 删除文件 - 默认 常用组合指令&#xff1a; 指令不常用/组合用法还需继续挖掘&#xff1a; 内容来源&#xff1a; GUN &#x…

element-ui 实现输入框下拉树组件(2024-05-23)

用element-ui的 el-input&#xff0c;el-tree&#xff0c;el-popover组件组合封装 import url("//unpkg.com/element-ui2.15.14/lib/theme-chalk/index.css"); <script src"//unpkg.com/vue2/dist/vue.js"></script> <script src"//…

单链表经典算法题理解

目录 1. 前言&#xff1a; 2. 移除链表元素 3. 反转链表 4. 合并两个有序链表 5. 链表的中间节点 6. 环形链表的约瑟夫问题 7. 分割链表 1. 前言&#xff1a; 当我们学习了单链表之后&#xff0c;我能可以尝试的刷一下题了&#xff0c;以下分享一下几道题的解法 2. 移…

HR招聘面试测评,哪些工作岗位需要测评创新能力?

什么是创新能力&#xff1f; 创新能力指在现有的物质基础上&#xff0c;通过某些特定的条件&#xff0c;促成满足未来社会发展的新事物。无论是个人还是国家都需要巨大的创新能力&#xff0c;因为创新是一切发展的根基&#xff0c;离开了创新&#xff0c;所有的发展都是原地踏…

串口通信问题排查总结

串口通信问题排查 排查原则&#xff1a; 软件从发送处理到接收处理&#xff0c;核查驱动、控制及发送接收数据是否正常。硬件从发送到接收&#xff0c;针对信号经过的各段&#xff0c;分段核对信号是否正常。示波器、逻辑分析仪。用万用表、示波器、逻辑分析仪等工具&#xf…

23种设计模式之一— — — —装饰模式详细介绍与讲解

装饰模式详细讲解 一、定义二、装饰模式结构核心思想模式角色模式的UML类图应用场景模式优点模式缺点 实例演示图示代码演示运行结果 一、定义 装饰模式&#xff08;别名&#xff1a;包装器&#xff09; 装饰模式&#xff08;Decorator Pattern&#xff09;是结构型的设计模式…

U盘无法打开?数据恢复与预防措施全解析

在日常生活和工作中&#xff0c;U盘已成为我们存储和传输数据的重要工具。然而&#xff0c;有时我们会遇到U盘无法打开的情况&#xff0c;这无疑给我们带来了诸多不便。本文将深入探讨U盘打不开的现象、原因及解决方案&#xff0c;并分享如何预防此类问题的发生。 一、U盘无法访…

软件架构设计属性之三:结构性属性浅析

文章目录 引言一、结构性属性的定义二、结构性属性的关键要素1. 组件化2. 模块化3. 层次化4. 接口定义5. 数据流6. 依赖管理 三、结构性属性的设计原则1. 高内聚低耦合2. 松耦合3. 清晰的接口4. 可维护性5. 可扩展性 四、结构性属性的实现策略1. 组件划分2. 模块化设计3. 接口设…

数据结构(1):线性表

1 线性表的顺序实现 创建的新项目是cpp类型哦&#xff01; 1.1 初始化 1.1.1 静态分配 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #define MaxSize 10 //定义顺序表的长度 typedef struct {int data[MaxSize];//用静态的数组存放元素&#xff01;int lengt…

目标检测 | R-CNN、Fast R-CNN与Faster R-CNN理论讲解

☀️教程&#xff1a;霹雳吧啦Wz ☀️链接&#xff1a;https://www.bilibili.com/video/BV1af4y1m7iL?p1&vd_sourcec7e390079ff3e10b79e23fb333bea49d 一、R-CNN R-CNN&#xff08;Region with CNN feature&#xff09;是由Ross Girshick在2014年提出的&#xff0c;在PAS…

基于文本来推荐相似酒店

基于文本来推荐相似酒店 查看数据集基本信息 import pandas as pd import numpy as np from nltk.corpus import stopwords from sklearn.metrics.pairwise import linear_kernel from sklearn.feature_extraction.text import CountVectorizer from sklearn.feature_extrac…

蓝桥杯-AB路线(详细原创)

问题描述&#xff1a; 有一个由 N M 个方格组成的迷宫&#xff0c;每个方格写有一个字母 A 或者 B。小蓝站在迷宫左上角的方格&#xff0c;目标是走到右下角的方格。他每一步可以移动到上下左右相邻的方格去。 由于特殊的原因&#xff0c;小蓝的路线必须先走 K 个 A 格子、再…

java高级——Collection集合之List探索(包含ArrayList、LinkedList、Vector底层实现及区别,非常详细哦)

java高级——Collection集合之List探索 前情提要文章介绍提前了解的知识点1. 数组2. 单向链表3. 双向链表4. 为什么单向链表使用的较多5. 线程安全和线程不安全的概念 ArrayList介绍1. 继承结构解析1.1 三个标志性接口1.2 AbstractList和AbstractCollection 2. ArrayList底层代…

刷爆leetcode第六期

题目一 用队列实现栈 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。 int pop() 移除…