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

React（1）——快速入门

news 2025/8/16 18:23:03

一、React背景简介 ❤️

官网和资料 📚

介绍描述 🐧

React的特点 🔨

React高效的原因 🙏🏻

二、React的基本使用 💻

三、React JSX（JSX:JavaScript XML）📦

编辑

四、渲染虚拟DOM(元素) 🚄

创建虚拟DOM的两种方式 ⭐️

五、JSX练习 ☁️

六、React 模块与组件、模块化与组件化 🔍

模块 🏡

组件 📱

模块化 🌿

组件化 ☘️

七、React面向组件编程 🤔

使用React开发者工具调试 📢

函数式组件：写一个demo 📹

注意 ⚠️

类式组件：写一个demo 📓

复习类的知识 ✅

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

组件对象的三大核心 🎨

1、state——何为简单何为复杂？（复杂就是有状态，简单组件是没有状态的）💡

理解 🐛

强烈注意 🔊

复习一下原生事件的绑定 🖋

2、props 📖

理解 🧑‍🏫

作用 🔌

编码：📆

3、 refs与事件处理 🛡️

理解 🔧

编码 📹

事件处理 🌍

一、React背景简介 ❤️

官网和资料 📚

英文官网: https://reactjs.org/
中文官网: 快速入门 – React (docschina.org)

3、如果JS基础忘了及时查看文档：JavaScript - 学习 Web 开发 |多核 (mozilla.org)

JavaScript - 标签 - 汤姆大叔 - 博客园 (cnblogs.com)

4、React Guidebook - React 知识图谱关于概念、技巧、生态、前沿、源码核心 - React Guidebook (tsejx.github.io)

5、Hello from React Status | React Status (docschina.org)

6、印记中文 - 深入挖掘国外前端领域，为中国 Web 前端开发人员提供优质文档 (docschina.org)

7、React快速上手开发

介绍描述 🐧

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

React的特点 🔨

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

React高效的原因 🙏🏻

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

面试：说说自己理解的react/介绍一下react

版本1：

React是用于构建用户界面的JavaScript库。React可以创建交互式UI。为应用程序中的每个状态建立的视图，并且React将在数据更改时进行更新，呈现正确的组件。另外，我们也可以构建管理自己状态的封装组件，然后将它们组合成复杂的UI。因为组件用JS编写而不是模板，所以可以通过应用传递数据，并使状态与DOM分离。

版本2：

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图） React特点有： 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

面试：项目里用到了react，为什么要选择react，react有哪些好处？

（1）声明式设计。

（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。

（3）灵活：可以与已知的框架或库很好的配合。

（4）JSX：是js语法的扩展，不一定使用，但建议用。

（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。

（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。

面试：angularJs和react区别

React对比Angular是思想上的转变，它也并不是一个库，是一种开发理念，组件化，分治的管理，数据与view的一体化。它只有一个中心,发出状态，渲染view，对于虚拟dom它并没有提高渲染页面的性能，它提供更多的是利用jsx便捷生成dom元素，利用组件概念进行分治管理页面每个部分(例如 header section footer slider)

面试：说说vue、 react 、angularjs 、jquery的区别

JQuery与另外几者最大的区别是，JQuery是事件驱动，其他两者是数据驱动。 JQuery业务逻辑和UI更改该混在一起， UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。 Angular，vue是双向绑定，而React不是其他还有设计理念上的区别等

二、React的基本使用 💻

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

三、React JSX（JSX:JavaScript XML）📦

react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖。
作用: 用来简化创建虚拟DOM。
写法：var ele = <h1>Hello JSX!</h1> 注意1：它不是字符串, 也不是HTML/XML标签；注意2：它最终产生的就是一个JS对象。
标签名任意: HTML标签或其它标签；标签属性任意: HTML标签属性或其它。
基本语法规则：① 、遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析；②、遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含。
babel.js的作用：①、浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行；②、只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。

<!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><!-- 引入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" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。*/</script>
</body>
</html>

四、渲染虚拟DOM(元素) 🚄

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明：参数一: 纯js或jsx创建的虚拟dom对象；参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_虚拟DOM与真实DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><div id="demo"></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'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* 关于虚拟DOM：1.本质是Object类型的对象（一般对象）2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。*/</script>
</body>
</html>

由此可见，虚拟DOM产生的对象比真实DOM产生的更少。React效率更高。

创建虚拟DOM的两种方式 ⭐️

①、使用JSX方式（JSX就是原始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>

②、使用JS方式(一般不用，了解即可)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_使用js创建虚拟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><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>
</body>
</html>

五、JSX练习 ☁️

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</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" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

六、React 模块与组件、模块化与组件化 🔍

模块 🏡

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件 📱

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化 🌿

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化 ☘️

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

七、React面向组件编程 🤔

使用React开发者工具调试 📢

安装之后，打开用React编写的官网，运行脚本将会发现。

函数式组件：写一个demo 📹

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

注意 ⚠️

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

类式组件：写一个demo 📓

复习类的知识 ✅

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

写一个demo

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

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

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

组件对象的三大核心 🎨

1、state——何为简单何为复杂？（复杂就是有状态，简单组件是没有状态的）💡

组件的状态会影响页面

理解 🐛

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

强烈注意 🔊

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

练习: 定义一个展示天气信息的组件

默认展示天气炎热或凉爽

点击文字切换天气

复习一下原生事件的绑定 🖋

（其中按钮3方式是后面学习React使用最多的）

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</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>Document</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>

2、props 📖

需求: 自定义用来显示一个人员信息的组件

姓名必须指定，且为字符串类型；

性别为字符串类型，如果性别没有指定，默认为男

年龄为字符串类型，且为数字类型，默认值为18

理解 🧑‍🏫

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

作用 🔌

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

编码：📆

3、 refs与事件处理 🛡️

理解 🔧

组件内的标签可以定义ref属性来标识自己

编码 📹

需求: 自定义组件, 功能说明如下:

点击按钮, 提示第一个输入框中的值

当第2个输入框失去焦点时, 提示这个输入框中的值

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

事件处理 🌍

通过onXxx属性指定事件处理函数(注意大小写)
1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

未完待续，将持续更新 ~

React（1）——快速入门

目录一、React背景简介 ❤️ 官网和资料 📚 介绍描述 🐧 React的特点 🔨 React高效的原因 🙏🏻 二、React的基本使用 💻 三、React JSX（JSX:JavaScript XML）📦 …...

编程日记 2023/8/5 4:28:39

【论文】【生成对抗网络五】Wasserstein GAN （WGAN）

【题目、作者】： 紫色：要解决的问题或发现的问题红色：重点内容棕色：关联知识，名称绿色：了解内容，说明内容论文地址： 论文下载本篇文章仅为原文翻译，仅作参考。…...

编程日记 2023/8/5 4:27:38

学习率Learn_rate是什么（深度学习）

学习率是指在训练神经网络时用于调整参数的步进大小，它决定了每次梯度更新时参数的调整程度。学习率的选择直接关系到模型的性能和训练过程的效果。学习率变化可能带来的影响： 收敛速度：较高的学习率可以加快模型的收敛速度，因为…...

编程日记 2023/8/5 4:26:36

webpack基础知识五：说说Loader和Plugin的区别？编写Loader，Plugin的思路？

一、区别前面两节我们有提到Loader与Plugin对应的概念，先来回顾下 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中plugin 赋予了 webpack 各种灵活的…...

编程日记 2023/8/5 4:25:34

AI大模型之花，绽放在鸿蒙沃土

随着生成式AI日益火爆，大语言模型能力引发了越来越多对于智慧语音助手的期待。我们相信，AI大模型能力加持下的智慧语音助手一定会很快落地，这个预判不仅来自对AI大模型的观察，更来自对鸿蒙的了解。鸿蒙一定会很快升级大模型能力&…...

编程日记 2023/8/5 4:24:33

[JAVAee]锁策略

目录乐观锁与悲观锁乐观锁乐观锁的冲突检测悲观锁读锁与写锁重量级锁与轻量级锁重量级锁轻量级锁自旋锁公平锁与非公平锁可重入锁与不可重入锁乐观锁与悲观锁乐观锁在乐观锁中,假设数据并不会发生冲突,在正式提交数据时会对数据进行冲突检测,如果发…...

编程日记 2023/8/5 4:23:32

uni-app-使用tkiTree组件实现树形结构选择

前言在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示在uni-app的内置组件中似乎没有提供这样组件来展示&#x…...

编程日记 2023/8/5 4:22:31

SQL-每日一题【1179. 重新格式化部门表】

题目部门表 Department： 编写一个 SQL 查询来重新格式化表，使得新的表中有一个部门 id 列和一些对应每个月的收入（revenue）列。查询结果格式如下面的示例所示： 解题思路 1.题目要求我们重新格式化表，…...

编程日记 2023/8/5 4:21:30

GO语言语法结构

GO语言结构包声明引入包函数变量语句 && 表达式注释 package main import "fmt" func main() {fmt.Println("Hello,World!") } 如这段代码块根据上面的语法结构进行逐行解释第一行的 package main 是定义一个包名，必须在源文件…...

编程日记 2023/8/5 4:20:29

C++学习——模板

目录 🍉一：什么是模板 🍎二：普通模板的定义 🍍三：类模板的定义 🍌四：模板的实例化 🍇1.当普通模板定义存在可修改返回值产生的分歧 🍈2：类模板实例…...

编程日记 2023/8/5 4:19:27

二叉树的遍历（先序遍历，中序遍历，后序遍历）递归与非递归算法

目录一、先序遍历题目链接1.递归2.非递归二、中序遍历题目链接1.递归2.非递归三、后序遍历题目链接1.递归2.非递归一、先序遍历先序遍历：先遍历一颗树的根节点，后遍历左子树，最后遍历右子树先序遍历序列： 1 -> 2 -> 4…...

编程日记 2023/8/5 4:18:26

【LeetCode】516. 最长回文子序列

文章目录 1. 思路讲解1.1 创建dp表1.2 状态转移方程1.3 不需考虑边界问题 2. 整体代码 1. 思路讲解 1.1 创建dp表此题采用动态规划的方法，创建一个二维dp表，dp[i][j]表示s[i, j]中最大回文子序列的长度。且我们人为规定 i 是一定小于等于 j 的。 1.2…...

编程日记 2023/8/5 4:17:25

Java 集合框架

Java 集合框架提供了一组接口和类，以实现各种数据结构和算法。集合框架满足以下几个要求。该框架必须是高性能的。基本集合（动态数组，链表，树，哈希表）的实现也必须是高效的。该框架允许不同类型的集合…...

编程日记 2023/8/5 4:16:24

遇到多人协作，我们该用git如何应对?(版本二)

一、多人协作二 1.1多人协作一般情况下，如果有多需求需要多人同时进行开发，是不会在一个分支上进行多人开发，而是一个需求或一个功能点就要创建一个feature 分支。现在同时有两个需求需要你和你的小伙伴进行开发，那么你们俩便…...

编程日记 2023/8/5 4:15:23

Flutter iOS 集成使用 fluter boost

在 Flutter项目中集成完 flutter boost，并且已经使用了 flutter boost进行了路由管理，这时如果需要和iOS混合开发，这时就要到原生端进行集成。注意：之前建的项目必须是 Flutter module项目，并且原生项目和flutter m…...

编程日记 2023/8/5 4:14:22

node.js相关的npm包的集合

一、实用功能 1. qs 一个简单易用的字符串解析和格式化库 2.rxjs RxJS是一组模块化的库，用于使用 JavaScript 中的可观察集合和组合来组合异步和基于事件的程序。 3. mitt 微型 200b 功能事件发射器/发布订阅. 4.Underscore.js Underscore.js是一个用于 JavaScript…...

编程日记 2023/8/5 4:13:21

Android Ble蓝牙App（二）连接与发现服务

Ble蓝牙App（二）连接与发现服务前言正文一、GATT回调二、连接和断连三、连接状态回调四、发现服务五、服务适配器六、显示服务七、源码前言在上一篇中我们进行扫描设备的处理，本文中进行连接和发现服务的数据处理，运行效果图如下…...

编程日记 2023/8/5 4:12:18

Android 自定义按钮（可滑动、点击）

按钮图片素材 https://download.csdn.net/download/Lan_Se_Tian_Ma/88151085 px 和 dp 转换工具类（Java） // px 和 dp 转换工具类 public class DensityUtil {/*** 根据手机的分辨率从 dip 的单位转成为 px(像素)*/public static int dip2px(Conte…...

编程日记 2023/8/5 4:11:17

mac录屏怎么打开？很简单，让我来教你！

mac电脑作为一款广受欢迎的电脑系统，提供了多种方式来满足用户录屏的需求。无论您是要录制教学视频、制作演示文稿，还是记录游戏精彩瞬间，mac电脑都能帮助您实现这些目标。本文将为您介绍两种mac录屏的方法。通过本文的指导，您将能…...

编程日记 2023/8/5 4:10:16

Stable Diffusion AI绘画学习指南【插件安装设置】

插件安装的方式可用列表方式安装，点开Extensions 选项卡，找到如下图，找到Available选项卡，点load from加载可用插件，在可用插件列表中找到要装的插件按install 按扭按装，安装完后(Apply and restart UI)应…...

编程日记 2023/8/5 4:09:15

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/7/22 21:10:21

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/7/12 1:42:15

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...

编程新知 2025/8/16 16:49:45

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/7/23 10:55:13

Psychopy音频的使用

Psychopy音频的使用本文主要解决以下问题： 指定音频引擎与设备；播放音频文件本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/8/6 0:15:52

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/8/10 8:29:19

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/8/13 13:05:41

逻辑回归暴力训练预测金融欺诈

简述「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/8/2 2:30:42

一、React背景简介 ❤️

官网和资料 📚

介绍描述 🐧

React的特点 🔨

React高效的原因 🙏🏻

二、React的基本使用 💻

三、React JSX（JSX:JavaScript XML）📦

四、渲染虚拟DOM(元素) 🚄

创建虚拟DOM的两种方式 ⭐️

五、JSX练习 ☁️

六、React 模块与组件、模块化与组件化 🔍

模块 🏡

组件 📱

模块化 🌿

组件化 ☘️

七、React面向组件编程 🤔

使用React开发者工具调试 📢

函数式组件：写一个demo 📹

注意 ⚠️

类式组件：写一个demo 📓

复习类的知识 ✅

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

组件对象的三大核心 🎨

1、state——何为简单何为复杂？（复杂就是有状态，简单组件是没有状态的）💡

理解 🐛

强烈注意 🔊

复习一下原生事件的绑定 🖋

2、props 📖

理解 🧑‍🏫

作用 🔌

编码：📆

3、 refs与事件处理 🛡️

理解 🔧

编码 📹

事件处理 🌍

相关文章：