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

浅学React和JSX

news 文章来源：https://blog.csdn.net/qq_73181349/article/details/142739157 2025/5/10 20:33:39

往期推荐

一文搞懂大数据流式计算引擎Flink【万字详解，史上最全】-CSDN博客

数仓架构：离线数仓、实时数仓Lambda和Kappa、湖仓一体数据湖-CSDN博客

一文入门大数据准流式计算引擎Spark【万字详解，全网最新】_大数据 spark-CSDN博客

浅谈维度建模、数据分析模型，何为数据仓库，与数据库的区别_数据建模金博尔-CSDN博客

1. 真实DOM和虚拟DOM

2. JSX语法规则

3. 虚拟DOM中使用内联样式

4. render渲染虚拟DOM

5. 函数式组件和类式组件

6. State状态

6.1 类的基本知识

6.2 state复杂写法

6.3 state简单写法

7.Props

7.1 基本使用

7.2 类型限制

8. Ref

8.1 字符串形式的ref

8.2 回调函数的ref

8.3 createRef()

9. Ajax和Axios

9.1 前置说明

9.2 Ajax请求库

9.3 Axios请求

9.4 Server.js代理

10. 路由

用antd做个人博客卡到前端了，迫不得已来学react，也是干上全栈了-- --学自尚硅谷张天禹react

React就是js框架，可以理解为对js做了封装，那么封装后的肯定用起来更方便。

相关JS库

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行。只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。

JS库示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</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" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

浏览器控制台可能会报如下错误：

找不到favicon.ico的资源，那么左上角的标签页就不显示图标。解决方法是在项目中根目录下放一个同名图标即可。

1. 真实DOM和虚拟DOM

React提供了一些API来创建虚拟DOM对象

虚拟dom定义在<script type="text/babel"> </script>中！！！
//创建虚拟dom
1.用React创建，语法：React.createElement('标签名',{标签属性},'标签内容')
const VDOM = React.createElement('Good',{id:'title'},'Hello JSX')2.用JSX语法创建，可以看到这样创建dom更简单
const VDOM = <Good id="title">Hello JSX</Good>//创建真实dom，不常用
const DOM = document.createElement()
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
虚拟DOM对象最终都会被React转换为真实的DOM。
虚拟dom本质是一个Object（控制台输出VDOM instanceof Object的结果为true）。
虚拟dom内部元素少，真实dom内部元素多，因为虚拟dom是react内用，无需真实dom那么多属性。

注意！创建的虚拟dom只能有一个根标签，并且内部的标签必须闭合（有 /> 结束），如：
//正确的创建虚拟DOM，根标签只有一个
const VDOM = (<div><h2>青秋</h2></div>
)//错误的创建虚拟DOM，根标签有俩div
const VDOM = (<div><h2>青秋</h2></div><div><h2>青秋</h2></div>
)//必须有/>结束
const VDOM = (<div><h2>青秋</h2>//<input type="text" > 错误，没有闭合<input type="text"/> 或 <input type="text"/> </input></div>)

2. JSX语法规则

全称是JavaScript XML，是react定义的一种类似于XML的JS扩展语法，可以把js和html写在一起，类似JSP。

JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
作用: 用来简化创建虚拟DOM
写法：var VDOM= <h1>Hello JSX</h1>
注意：这样创建的<h1>不是字符串, 也不是HTML/XML标签，它最终产生的就是一个JS对象
标签名和标签属性任意，可以是HTML标签属性或其它
语法规则：
遇到 < 开头的代码, 以标签的语法解析: 与html同名标签则转换为html同名元素, 其它标签需要特别解析，如：
//自定义的h1会被替换成html中同名的标签<h1>
const vdom1=<h1>hello</h1>//自定义的Good在html中不存在同名标签,浏览器控制台会报错
const vdom2=<good>hello</good>
也就是说，定义的虚拟dom中，开头小写的标签会去html中寻找同名的元素并替换，找不到就会报上面的错误。如果是开头大写的标签，那么就是自定义的组件，如果写成Good，那么浏览器就会去渲染Good组件，因此Good组件需要提前定义，否则会undefined。
遇到以 { 开头的代码，以JS语法解析，标签中的JS表达式必须用{ }包含，比如要在标签中引用自定义的变量，就要用{ }把自定义变量包裹起来，如：
const myId="青秋"
const myData="青秋博客"//1.创建虚拟DOM
const VDOM = (<div><h2 id={myId}><span>{myData}</span></h2></div>
)

3. 虚拟DOM中使用内联样式

在虚拟dom中使用内联样式（直接在标签中写style），需要用{{ }}包裹，其中外层的{ }代表标签里要写js表达式，内层的{ }代表要写的是一个对象。

另外{{ }}的style属性名是小驼峰的形式，比如font-size写成fontSize。真实dom的类名是class，虚拟dom的类名是className。如：
//真实dom内联样式
<div class="dom"><h2 style="color: black;font-size: large;">青秋博客</h2>
</div>//虚拟DOM内联样式
const VDOM = (<div className="vdom"><h2 style={{color:'white',fontSize:'29px'}}>青秋博客</h2></div>
)

4. render渲染虚拟DOM

语法: ReactDOM.render(<MyComponent/>,document.getElementById('test'))
作用: 将定义的虚拟DOM元素渲染到页面中的真实DOM中显示。
参数说明：MyComponent是创建的虚拟dom对象；document.getElementById('test')是根据id获取的真实dom容器，是用来用来包含虚拟dom的。

5. 函数式组件和类式组件

简单组件

组件名必须首字母大写！！小写则会去html中寻找同名元素

<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>

复杂组件

<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>

6. State状态

6.1 类的基本知识

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_类的基本知识</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>

状态即数据，状态变化会驱动视图变化，可以简单理解为存储数据的对象。
复杂组件即类定义组件有this，那么就有state，可以理解为一个对象的属性，可以通过constructor()传递参数，而简单组件的this是undefined就没有state一说。
render方法中的this就是组件实例对象
组件自定义的方法中this为undefined，如何解决？
1. 强制绑定this，通过函数对象的bind() 2.箭头函数

注意！！状态必须通过setState进行更新，不能直接更改。
正确的：this.setState({isHot:!isHot})
错误的：this.state.isHot = !isHot

6.2 state复杂写法

<script type="text/babel">//1.创建组件class Weather extends React.Component{//构造器调用几次？ ———— 1次constructor(props){console.log('constructor');super(props)//初始化状态this.state = {isHot:false,wind:'微风'}//changeWeather是自定义的，要解决changeWeather中this指向问题//调用bind方法会生成一个新函数，然后把新函数绑定到this实例对象上并命名为change，那么this实例对象有了名为change的方法this.change = this.changeWeather.bind(this)}//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 //这是错误的写法}//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数render(){console.log('render');//读取状态const {isHot,wind} = this.state//render函数中调用该类的另一个函数changeWeather，需要用this调用，否则会找不到要调用的函数！！return <h1 onClick={this.change}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}}//2.渲染组件到页面ReactDOM.render(<Weather/>,document.getElementById('test'))</script>

6.3 state简单写法

<script type="text/babel">//1.创建组件class Weather extends React.Component{//初始化状态state = {isHot:false,wind:'微风'}//自定义方法————要用赋值语句的形式+箭头函数changeWeather = ()=>{const isHot = this.state.isHotthis.setState({isHot:!isHot})}render(){const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}}//2.渲染组件到页面ReactDOM.render(<Weather/>,document.getElementById('test'))</script>

7.Props

props用于父组件向子组件传递数据，props只读无法修改（）

7.1 基本使用

<script type="text/babel">//创建组件class Person extends React.Component{render(){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'))const p = {name:'老刘',age:18,sex:'女'}ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))</script>

7.2 类型限制

<script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//创建组件class Person extends React.Component{render(){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}//渲染组件到页面function speak(){console.log('我说话了');}ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))const p = {name:'老刘',age:18,sex:'女'}ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))</script>

8. 订阅-发布PubSub

订阅发布用于兄弟组件传递数据，在之前，一个父亲有两个儿子，两个儿子要通信，要借助父亲来传达消息，而现在使用发布订阅，不需要借助父亲，两个儿子可以直接通信。

如List和Search两个兄弟组件

import React, { Component } from 'react'
import PubSub from 'pubsub-js'export default class List extends Component {state = { //初始化状态users:[], //users初始值为数组isFirst:true, //是否为第一次打开页面isLoading:false,//标识是否处于加载中err:'',//存储请求相关的错误信息} componentDidMount(){this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{this.setState(stateObj)})}componentWillUnmount(){PubSub.unsubscribe(this.token)}render() {const {users,isFirst,isLoading,err} = this.statereturn (<div className="row">{isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :isLoading ? <h2>Loading......</h2> :err ? <h2 style={{color:'red'}}>{err}</h2> :users.map((userObj)=>{return (<div key={userObj.id} className="card"><a rel="noreferrer" href={userObj.html_url} target="_blank"><img alt="head_portrait" src={userObj.avatar_url} style={{width:'100px'}}/></a><p className="card-text">{userObj.login}</p></div>)})}</div>)}
}export default class Search extends Component {search = ()=>{//获取用户的输入(连续解构赋值+重命名)const {keyWordElement:{value:keyWord}} = this//发送请求前通知List更新状态PubSub.publish('atguigu',{isFirst:false,isLoading:true})//发送网络请求axios.get(`/api1/search/users?q=${keyWord}`).then(response => {//请求成功后通知List更新状态PubSub.publish('atguigu',{isLoading:false,users:response.data.items})},error => {//请求失败后通知App更新状态PubSub.publish('atguigu',{isLoading:false,err:error.message})})}render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">搜索github用户</h3><div><input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;<button onClick={this.search}>搜索</button></div></section>)}
}

9. Ref

为自定义的标签打标识

9.1 字符串形式的ref

string形式的 ref 存在效率问题，不推荐使用

<script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = this.refsalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = this.refsalert(input2.value)}render(){return(<div>//ref相当于属性id，即标识了一个名为input1的input标签<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/></div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>

9.2 回调函数的ref

<script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = thisalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = thisalert(input2.value)}render(){return(<div>//input的ref为c，把c赋给this实例对象，即把c标识的这个input标签赋给this对象，同时把input标签命名为myinput<input ref={c => this.myinput = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>

9.3 createRef()

<script type="text/babel">//创建组件class Demo extends React.Component{/* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = ()=>{alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = ()=>{alert(this.myRef2.current.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>

10. Ajax和Axios

10.1 前置说明

React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)

10.2 Ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
封装XmlHttpRequest对象的ajax（XHR）
promise风格
可以用在浏览器端和node服务器端

10.3 Axios请求

1)	GET请求
axios.get('/user?ID=12345').then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});2)	POST请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);})
.catch(function (error) {console.log(error);});

10.4 Server.js代理

除了熟知的nginx代理，还可以用js实现代理。
代理是为了解决跨域请求，在前后端交互中，前端发给后端的请求被后端接收到，但是后端返回给前端的数据却无法被前端接收。

export default class App extends React.Component {getStudentData = ()=>{axios.get('http://localhost:3000/api1/students').then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);})}getCarData = ()=>{axios.get('http://localhost:3000/api2/cars').then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);})}render() {return (<div><button onClick={this.getStudentData}>点我获取学生数据</button><button onClick={this.getCarData}>点我获取汽车数据</button></div>)}
}================================代理===============================//引入了 http-proxy-middleware 库，它提供了一种简单的方法来创建代理中间件。
const proxy = require('http-proxy-middleware')module.exports = function(app){app.use(proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值。Host请求标识请求来源pathRewrite:{'^/api1':''} //重写请求路径(必须)}),proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}

11. 路由

哈希路由和浏览器路由

BrowserRouter与HashRouter的区别
           1.底层原理不一样：
                       BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
                       HashRouter使用的是URL的哈希值。
           2.path表现形式不一样
                       BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
                       HashRouter的路径包含#,例如：localhost:3000/#/demo/test
           3.刷新后对路由state参数的影响
                       (1).BrowserRouter没有任何影响，因为state保存在history对象中。
                       (2).HashRouter刷新后会导致路由state参数的丢失！！！
           4.备注：HashRouter可以用于解决一些路径错误相关的问题。

编程式路由导航

不需要用户触发，可以自动跳转链接

借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()

向路由组件传参

浅学React和JSX

往期推荐一文搞懂大数据流式计算引擎Flink【万字详解，史上最全】-CSDN博客数仓架构：离线数仓、实时数仓Lambda和Kappa、湖仓一体数据湖-CSDN博客一文入门大数据准流式计算引擎Spark【万字详解，全网最新】_大数据 spark-CSDN博客浅谈维度建…...

编程日记 2024/10/12 9:18:36

React 为什么 “虚拟 DOM 顶部有很多 provider“？

1、介绍React中的Context Provider 在 React 中，虚拟 DOM（Virtual DOM）是 React 用来高效更新 UI 的核心机制，它通过对比前后两次虚拟 DOM 树，确定哪些部分需要更新，以减少直接操作真实 DOM 的开销。而 “…...

编程日记 2024/10/12 9:17:35

忘记了 MySQL 8.0 的 root 密码，应该怎么办？

如果你忘记了 MySQL 8.0 的 root 密码，可以通过以下步骤来重置密码。请注意，这些步骤需要你有对 MySQL 服务器的物理或命令行访问权限。步骤 1: 停止 MySQL 服务首先，你需要停止正在运行的 MySQL 服务。你可以使用以下命令来停止 MySQL 服…...

编程日记 2024/10/12 9:14:30

Promise.reject()

Promise.reject() 静态方法返回一个已拒绝（rejected）的 Promise 对象，拒绝原因为给定的参数。语法 Promise.reject(reason)参数 reason 该 Promise 对象被拒绝的原因。返回值返回一个已拒绝（rejected）的 Promi…...

编程日记 2024/10/12 9:13:27

大数据-163 Apache Kylin 全量增量Cube的构建手动触发合并 JDBC 操作 Scala

点一下关注吧！！！非常感谢！！持续更新！！！ 目前已经更新到了： Hadoop（已更完）HDFS（已更完）MapReduce（已更完&am…...

编程日记 2024/10/12 9:09:23

云手机与传统手机的区别是什么？

随着科技的快速进步，云手机逐渐成为手机市场的热门选择。与传统的智能手机相比，云手机具有许多独特的功能和优势，尤其在多账号管理和高效操作方面备受关注。那么，云手机究竟与普通手机有哪些区别呢？ 1. 更灵活的操作与…...

编程日记 2024/10/12 9:08:22

微知-Bluefield DPU命名规则各字段作用？BF2 BF3全系列命名大全

文章目录背景字段命名C是bmc的意思NOT的N是是否加密S表示不加密但是secureboot enable倒数第四个都是E倒数第五个是速率 V和H是200GM表示E serials，H表示P serials（区别参考兄弟篇：[more](https://blog.csdn.net/essencelite/article/detail…...

编程日记 2024/10/12 9:06:19

Ubuntu 上使用 Nginx 实现反向代理并启用 HTTPS（详细教程）

拒绝使用宝塔，虽然宝塔很好用方便，但是他非常占用资源，所以我正在尝试转换我使用服务器的方式，通过命令来才做这些，下面是我的详细步骤。在这篇教程中，我们将详细介绍如何在 Ubuntu 系统上使用 Nginx 搭建…...

编程日记 2024/10/12 9:05:18

2. 继承Mono的单例模式基类

前提继承MonoBehaviour的脚本不能new继承MonoBehaviour的脚本一定得依附在GameObject上实现挂载式的单例模式基类挂载式继承Mono的单例模式基类 /// <summary> /// 挂载式继承Mono的单例模式基类 /// </summary> /// <typeparam name"T">&…...

编程日记 2024/10/12 9:04:04

数据治理：制造企业转型的关键要素与战略需求

制造业，作为国民经济的主体，是立国之本、兴国之器、强国之基。从工业文明的曙光初现，到今日全球化的激烈竞争，始终昭示着一个真理：没有强大的制造业，就没有国家和民族的强盛。为全面推进制造强国建设&…...

编程日记 2024/10/12 9:02:02

FastAPI 基本路由

FastAPI 基本路由 FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，与 Python 3.6+ 类型提示一起使用。在本文中，我们将探讨 FastAPI 的基本路由概念，包括如何定义路由、处理请求和响应，以及一些高级特性。什么是路由？在 Web 框架中，路由是指将传入的…...

编程日记 2024/10/12 9:01:01

Python库matplotlib之六

Python库matplotlib之六动画FuncAnimation构造器成员函数应用例子动画 Matplotlib基于其绘图功能，还提供了一个使用动画模块，生成动画的接口。动画是一系列帧，其中每个帧对应于图形上的一个图。 Matplotlib使用两个类来实现动画&#xff…...

编程日记 2024/10/12 8:56:57

十一、数据库的设计规范

文章目录 1. 为什么需要数据库设计2. 范式2.1 范式介绍2.2 范式都包括哪些2.3 键和相关属性的概念2.4 第一范式（1st NF）2.5 第二范式(2nd NF)2.6 第三范式(3rd NF)2.7 小结3. 反范式化3.1 概述3.2 应用举例3.3 反范式的新问题3.4 反范式的使用场景3.4.1 增加冗余字段的建议3.…...

编程日记 2024/10/12 8:55:55

这届物理与化学诺奖对S2AIAI4S的启示

物理学与AI看似神秘而又简洁的纠缠随着今年诺贝尔物理学奖（这篇还没来得及发，化学奖也...）的颁布，不管是国内某圈还是国外某管，无论是学术界又或产业界，充斥着震惊又或是“物理学不存在了”之类的调侃&am…...

编程日记 2024/10/12 8:54:54

压力测试指南-云环境中的压力测试实践

云环境中的压力测试实践 1. 云环境对压力测试的影响在数字化转型的浪潮中，云环境已成为软件部署与测试的首选。它不仅提供了无限的可扩展性，还极大地改变了我们进行压力测试的方式。传统本地环境中，硬件资源的限制常导致无法模拟真实世界…...

编程日记 2024/10/12 8:53:52

基于多密钥同态加密的安全高效的联邦学习

文章目录摘要与简介部分1、联邦学习 FL2、同态加密 HE3、文章创新点一、简介1、基于 HE 的 FLs2、离线问题3、计算开销4、该文章的工作5、文章的贡献点二、背景和相关研究1、基于多方安全计算 (SMC) 的联邦学习 (FL)2、基于差分隐私 (DP) 的联邦学习 (FL)3、基于可信执行环境…...

编程日记 2024/10/12 8:52:51

R语言统计分析——气泡图

参考资料：R语言实战【第2版】气泡图（bubble plot）用来展示三个定量变量间的关系：先创建一个二维散点图，然后用点的大小来代表第三个边变量的值。我们可以使用symbols()函数来创建气泡图。该函数可以在指定的(x,y)坐标…...

编程日记 2024/10/12 8:47:43

实用篇—Navicat复制多条INSERT语句，去除ID列执行

在数据库管理中，常常需要将数据从一个表复制到另一个表。使用 Navicat 等工具可以方便地导出多条 INSERT 语句，但有时我们不需要某些列（如 ID 列）。本文将介绍如何在 Navicat 中复制多条 INSERT 语句，并去除 ID 列以便…...

编程日记 2024/10/12 8:45:40

pytorch中张量的有关操作创建张量torch.tensor(data): 从数据创建张量torch.zeros(size): 创建元素全为0的张量torch.ones(size): 创建元素全为1的张量torch.empty(size): 创建未初始化的张量torch.randn(size): 创建服从标准正态分布的张量torch.arange(start, end, step): 创…...

编程日记 2024/10/12 8:43:38

Windows多线程编程互斥量和临界区使用

Windows 多线程编程允许程序同时运行多个线程，提高程序的并发性和执行效率。多线程编程中的核心概念包括线程的创建、同步、调度、数据共享和竞争条件等。本文详细介绍了 Windows 多线程编程的关键技术点，并解释如何使用线程同步机制来保证线程安全。 1…...

编程日记 2024/10/12 8:41:36

Java中集合类型的转换

在Java编程中，集合框架（Collections Framework）提供了一套用于存储和处理对象集合的接口和类。由于集合框架的灵活性和强大功能，我们经常需要在不同的集合类型之间进行转换。本文将介绍Java中常见的集合类型转换方法，包…...

编程日记 2024/10/12 8:40:34

汽车售后TPMS浅谈

汽车售后中的TPMS，即轮胎压力监测系统（Tire Pressure Monitoring System），是一种重要的汽车安全系统。以下是对汽车售后TPMS的详细解释： 一、TPMS的作用 TPMS的主要作用是在汽车行驶过程中对轮胎气压进行实时自动监测…...

编程日记 2024/10/12 8:39:34

LUCEDA IPKISS Tutorial 77：在版图一定范围内填充dummy

案例分享：在给定的Shape内填充dummy 所有代码如下： from si_fab import all as pdk from ipkiss3 import all as i3 from shapely.geometry import Polygon, MultiPolygon import numpy as np import matplotlib.pyplot as pltclass CellFilledWithCon…...

编程日记 2024/10/12 8:38:33

TON生态小游戏开发：推广、经济模型与UI设计的建设指南

随着区块链技术的快速发展，基于区块链的Web3游戏正引领行业变革。而TON生态小游戏，借助Telegram庞大的用户基础和TON（The Open Network）链上技术，已成为这一领域的明星之一。国内外开发者正迅速涌入，开发和…...

编程日记 2024/10/12 8:34:29

Python 量子机器学习：基础概念、关键算法与应用实践

🌟 Python 量子机器学习：基础概念、关键算法与应用实践目录 🌍 量子计算的基本原理量子位、叠加、纠缠等概念解析量子计算如何影响机器学习：速度与效率的提升 🚀 量子机器学习中的关键算法量子支持向量机&#xf…...

编程日记 2024/10/12 8:33:28

信息安全数学基础（29） x^2 + y^2 = p

前言方程 x2y2p 是一个涉及整数解和素数 p 的二次方程。这个方程在数论和几何中都有重要的意义，特别是在研究圆的整数点和费马大定理的背景下。一、定义与背景方程 x2y2p 表示一个平面上的圆，其圆心在原点 (0,0)，半径为 p（当…...

编程日记 2024/10/12 8:31:25

ChatGPT国内中文版镜像网站整理合集（2024/10/06）

一、GPT中文镜像站 ① yixiaai.com 支持GPT4、4o以及o1，支持MJ绘画 ② chat.lify.vip 支持通用全模型，支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4，4o以及MJ绘画 1. 什么是镜像站镜像站（Mirror Site&#xff…...

编程日记 2024/10/12 8:27:17

图文深入理解Oracle DB Scheduler

值此国庆佳节，深宅家中，闲来无事，就多写几篇博文。今天继续宅继续写。本篇图文深入介绍Oracle DB Scheduler。 Oracle为什么要使Scheduler？ 答案就是6个字：简化管理任务。 • Scheduler（调度程序&#x…...

编程日记 2024/10/12 8:20:11

gin如何具体利用Server-Send-Events(SSE)实时推送技术实现消息推送

目录业务场景解决方案 1. 轮询 2. WebSocket 3. SSE(Server-Send-Events) 代码实现总结业务场景在抖音、美团等APP中，我们经常会遇到APP内部的消息推送，如关注的人的动态消息推送、点赞评论互动消息推送以及算法推荐消息推送。这些场景都是…...

编程日记 2024/10/12 8:19:09

写端口-tcp udp不同方式发包和接包

最近一直在学习网络编程，今天把 socket部分做一个总结。 Python 的socket库可以实现不同协议不同地址的发包和收包，无奈资料很少，官方例子有限，大神博客很少提及， 经过一番尝试后，总结以下几点用法以便大家…...

编程日记 2024/10/12 8:17:07

1. 真实DOM和虚拟DOM

2. JSX语法规则

3. 虚拟DOM中使用内联样式

4. render渲染虚拟DOM

5. 函数式组件和类式组件

6. State状态

6.1 类的基本知识

6.2 state复杂写法

6.3 state简单写法

7.Props

7.1 基本使用

7.2 类型限制

8. 订阅-发布PubSub

9. Ref

9.1 字符串形式的ref

9.2 回调函数的ref

9.3 createRef()

10. Ajax和Axios

10.1 前置说明

10.2 Ajax请求库

10.3 Axios请求

10.4 Server.js代理

11. 路由

相关文章：