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.mzph.cn/diannao/19197.shtml

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

相关文章

IDEA 2024.1.2安装与破解

官网下载 官网地址 安装 直接下一步 破解 破解网站 第一步 第二步 第三步 第四步 第五步

DSM驾驶行为分析系统在渣土车管理中的应用

随着科技的不断进步&#xff0c;智能交通系统正逐渐成为现代交通管理的重要工具。其中&#xff0c;DSM驾驶行为分析系统以其独特的功能和优势&#xff0c;在提升驾驶安全性、优化驾驶员管理等方面发挥着重要作用。索迪迈科技将DSM驾驶行为分析系统成功应用于渣土车管理中&#…

专业的力量-在成为专家的道路上前进

专业的力量-在成为专家的道路上前进 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 现在稀缺的已不再是信息资源&#xff0c;而是运用信息的能力。过去…

性能测试(基于Jmeter)

性能指标 RT&#xff08;Response Time&#xff09;响应时间&#xff1a;指的是用户从客户端发起请求开始到服务端返回结束&#xff0c;整个过程所耗费的时间 HPS&#xff08;Hits Per Second&#xff09;&#xff1a; 每秒点击次数&#xff0c;单位&#xff1a;次/秒 TPS&am…

居间人从事光伏行业需要了解的关键因素

随着国家对光伏新能源的大力推广&#xff0c;光伏电站装机量逐渐上升&#xff0c;居间人这个角色开始进入大家的视线&#xff0c;很多人集中式光伏的居间人这个行业蠢蠢欲动&#xff0c;那么究竟怎么判断自己适不适合从事光伏行业的居间人呢&#xff1f; 首先要了解集中式光伏…

Visual Studio 的调试

目录 引言 一、调试的基本功能 设置断点 启动调试 检查变量 逐步执行代码 调用堆栈 使用即时窗口 二、调试技巧 条件断点 日志断点 数据断点 异常调试 三、调试高级功能 远程调试 多线程调试 内存调试 性能调试 诊断工具 四、调试策略与最佳实践 系统化的…

Django入门全攻略:从零搭建你的第一个Web项目

系列文章目录 努力ing Django入门全攻略&#xff1a;从零搭建你的第一个Web项目努力ing… 文章目录 系列文章目录前言一、Django1.1 Django安装1.2 Django项目创建1.3 目录介绍 二、子应用2.1 子应用创建2.2 目录结构2.3 子应用注册2.4 子应用视图逻辑2.4.1 编写视图2.4.2 编写…

Go语言GoFly框架快速新增接口/上手写代码

拿到一个新框架大家可能无从下手&#xff0c;因为你对框架设计思路、结构不了解&#xff0c;从而产生恐惧&#xff0c;所以我们框架是通过简单可视化界面安装&#xff0c;安装后即可看到效果&#xff0c;然后点击先点点看各个功能&#xff0c;看现有的功能是怎么写的&#xff0…

存储器和CPU的连接与TCP的流量控制

存储器与CPU的连接 存储容量的拓展 &#xff08;1)位拓展&#xff1a;增加存储字长 &#xff08;2&#xff09;字拓展 增加存储器字的数量 例题&#xff1a;设CPU有16根地址线&#xff0c;8根数据线&#xff0c;并用MREQ作为访问存储控制信号(低电平有效)&#xff0c;WR作为…

CyberLink ColorDirector Ultra v12 解锁版安装教程 (视频后期调色软件)

前言 CyberLink ColorDirector Ultra 是一款视频后期调色处理软件&#xff0c;可以给视频进行专业色彩调整&#xff0c;让视频看起来焕然一新。它支持的格式视频非常多&#xff0c;流行的格式全都可以添加到里面进行调色处理&#xff0c;主要是使用关键帧控件进行颜色替换&…

【论文解读】OpenMix+: Revisiting Data Augmentation for Open Set Recognition

1、摘要 开集识别要求模型识别训练集中学习到的已知类样本&#xff0c;同时拒绝未学习到的未知类。与封闭集问题的结构风险最小化理论相比&#xff0c;开放集任务中的结构风险研究较少。本文指出结构风险与开放空间风险的平衡是开集识别的关键&#xff0c;并将其转化为开集结构…

12.可视化实现

时间过的很快,不知不觉已到第十二章。经过前面教程的讲解和实践,数据接入服务的功能已初步完成。 此章节将通过可视化的实现,对设备接入进行监控,实时监听设备的接入情况及设备的在线时长。 并且可以通过订阅按钮、取消订阅按钮、查看数据按钮,对上报数据进行实时的跟踪…

旧手机翻身成为办公利器——PalmDock的介绍也使用

旧手机有吧&#xff01;&#xff01;&#xff01; 破电脑有吧&#xff01;&#xff01;&#xff01; 那恭喜你&#xff0c;这篇文章可能对你有点用了。 介绍 这是一个旧手机废物利用变成工作利器的软件。可以在 Android 手机上快捷打开 windows 上的文件夹、文件、程序、命…

4月平板电脑行业线上销售数据分析

由于全球科技发展趋势&#xff0c;如AI技术的应用&#xff0c;以及厂商新品发布计划&#xff1b;同时&#xff0c;平板电脑作为个人电脑的延伸产品&#xff0c;其便携性和生产力相较于手机具有明显优势&#xff0c;这也为行业的进一步发展提供了动力。 据鲸参谋数据统计&#…

美团拼好饭小程序mtgsig1.2分析(补环境分析)

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章未…

【高频】redis快的原因

相关问题&#xff1a; 1.为什么Redis能够如此快速地进行数据存储和检索&#xff1f; 2.Redis作为内存数据库,其内存存储有什么优势吗? 3.Redis的网络模型有何特点,如何帮助提升性能? 一、问题回答 Redis使用了内存数据结构&#xff0c;例如字符串、哈希表、列表、集合、有…

python+pytest+pytest-html+allure集成测试案例

pythonpytestpytest-htmlallure集成测试案例 下面是pythonpytestpytest-htmlallure四个组件同时集成使用的简单案例。 1. 项目结构 project/ │ ├── src/ │ ├── __init__.py │ ├── main.py │ ├── tests/ │ ├── __init__.py │ ├── conftest.p…

【Linux】centos7编写C语言程序,补充:使用yum安装软件包组

确保已安装gcc编译器 C语言程序&#xff0c;一般使用gcc进行编译&#xff0c;需确保已安装gcc。 若没有&#xff0c;可以使用yum安装gcc&#xff08;版本4.8.5&#xff09;&#xff0c;也可以使用SCL源安装gcc&#xff08;例如&#xff1a;版本9.3&#xff09;。 安装gcc&am…

2024.05.29学习记录

1、css面经复习 2、代码随想录二刷 3、rosebush upload组件初步完成

Linux网络编程: udp,tcp协议原理

Linux网络编程: udp,tcp协议原理 一.udp和tcp的介绍1.udp介绍1.udp的特点2.udp的适用场景3.udp效率分析 2.tcp介绍1.tcp的特点2.tcp的适用场景 二.udp协议原理1.udp协议段格式2.udp的缓冲区和全双工通信 三.tcp协议段1.tcp协议段格式2.发送接收缓冲区3.确认应答ACK机制,窗口大小…