React 基础案例
React的特点：
1、声明式编程
2、组件化开发
3、多平台适配yuan
原生实现：
<h2 class="title"></h2><button class="btn">改变文本</button><script>let msg = "Hello World";const titleEl = document.querySelector(".title");titleEl.innerHTML = msg;const btnEl = document.querySelector(".btn");btnEl.addEventListener("click", (e) => {msg = "Hello React";titleEl.innerHTML = msg;});</script>React实现：
React开发必须依赖三个库
1、react：包含react所必须的核心代码
2、react-dom：react渲染在不同平台所需要的核心代码
3、babel：将jsx转换成React代码的工具
（1）引入依赖
1、直接CDN引入
2、下载后，添加本地依赖
3、npm管理（脚手架使用）
<body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">let msg = "Hello World";function btnClick() {msg = "Hello React";render();}// 渲染的内容，挂载的对象function render() {ReactDOM.render(<div><h2>{msg}</h2><button onClick={btnClick}>改变文本</button></div>,document.getElementById("app"));}render();</script></body>代码组件化
<body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">// 封装App组件 想让app是个组件必须先继承class App extends React.Component {// 构造器定义属性constructor() {super(); // 初始化父类实例，才可以使用this// 当数据变化引起页面的变化，不能直接定义在对象里面,必须写在state对象里面this.state = {msg: "Hello World",};}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.btnClick.bind(this)}>改变文本</button></div>);}btnClick() {//直接修改页面不会发生变化 this.state.msg = "Hello React";// 必须通过一个函数执行 数据更新操作render函数this.setState({msg: "Hello React",});}}ReactDOM.render(<App />, document.getElementById("app"));</script></body>（2）使用脚手架
原生使用的是命令式编程，react使用的是声明式编程
命令式编程：每做一个操作，都是计算机（浏览器）一步步命令
声明式编程：表明想要做什么，应该做什么，但是不指定具体怎么做
相关文章：
React 基础案例
React的特点： 1、声明式编程 2、组件化开发 3、多平台适配yuan 原生实现： <h2 class"title"></h2><button class"btn">改变文本</button><script>let msg "Hello World";const titleEl d…...
【Python探索之旅】选择结构（条件语句）
文章目录 条件结构： 1.1 if单分支结构 1.2 if-else 多分支结构 1.3 if-elif 多重结构： 完结撒花 前言 Python条件语句是通过一条或多条语句的执行结果（True或者False）来决定执行的代码块。 Python提供了顺序、选择、循环三…...
Recommender ~ Collaborative filtering
Using per-item features User j 预测 movie i： Cost Function: 仅求和用户投票过的电影。 常规规范化（usual normalization）：1/2m 正则化项：阻止过拟合 在知晓X的前提下，如何学习w，b参数…...
我觉得POC应该贴近实际
今天我看到一位老师给我一份测试数据。 这是三个国产数据库。算是分布式的。其中有两个和我比较熟悉，但是这个数据看上去并不好。看上去第一个黄色的数据库数据是这里最好的了。但是即使如此，我相信大部分做数据库的人都知道。MySQL和PostgreSQL平时拿出…...
AI 情感聊天机器人工作之旅 —— 与复读机问题的相遇与别离
前言：先前在杭州的一家大模型公司从事海外闲聊机器人产品，目前已经离职，文章主要讨论在闲聊场景下遇到的“复读机”问题以及一些我个人的思考和解决方案。文章内部已经对相关公司和人员信息做了去敏，如仍涉及到机密等情况…...
如何使用ArcGIS Pro进行选房分析
无论是研究城市规划布局还是寻找理想的住房，都需要综合考虑购物、医疗、教育和休闲等多方面因素，此时我们的GIS软件就可以派上用场了，这里为大家介绍一下如何使用 ArcGIS Pro 进行选房分析，希望能对你有所帮助。 数据来源 教程所…...
android图标底色问题，debug与release不一致
背景 在android 8（sdk 26）之前的版本，直接使用图片文件作为图标，开发时比较容易控制图标，但是不同的安卓定制版本就不容易统一图标风格了。 在android 8及之后的版本，图标对应的是ic_launcher.xml&#x…...
如何提高自己的全局视野？
以下是一些可以帮助提高全局视野的方法： 1. 广泛学习不同领域知识：包括但不限于技术相关的各个领域、业务知识、行业动态等，拓宽知识面。 2. 参与大型项目：积极投身到复杂的、规模较大的项目中，在实践中感受和理解系…...
element ui的确认提示框文字样式修改
修改确认提示框文字样式修改，使用message属性修改： 例： js代码： this.$msgbox({title: 确定要删除吗?,message: this.$createElement(p, null, [this.$createElement(span, { style: color: red }, 该素材一旦删除，…...
Typescript 哲学 - ts模块使用最佳实践
ts的作用域 默认是全局（global），这也是为什么在 两个ts文件声明同一个变量报错变量名冲突，解决方法是使某个文件以模块的形式存在（文件顶层使用 export 、import ） In TypeScript, just as in ECMAScript 2…...
自动驾驶决策规划——坐标转换
以下内容来自b站up主忠厚老实的老王，视频链接：自动驾驶决策规划算法序章 总纲与大致目录_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1hP4y1p7es/?spm_id_from333.999.0.0&vd_sourced36e625f376908cfa88ef5ecf2fb0ed8侵删。 决策规划算法…...
信创应用软件之邮箱
信创应用软件之邮箱 文章目录 信创应用软件之邮箱采用信创邮箱的必要性信创邮箱采购需求国产邮箱业务形态国产邮箱代表性品牌CoremailRichmail安宁eyouUMail拓波 邮件安全的发展阶段 采用信创邮箱的必要性 邮箱是天然的数据存储空间，党政和央国企客户在使用过程中存…...
TriCore: Architecture
说明 本文是 英飞凌 架构文档 TriCore TC162P core archiecture Volume 1 of 2 (infineon.com) 的笔记，稍作整理方便查阅，错误之处，还请指正，谢谢 :) 1. Architecture 2. General Purpose & System Register 名词列表&#…...
16进制与不同进制之间计算加减乘除的比较快的方法
方法： 1.加分、减法： 将所有的进制的数转成目标进制的数，然后按位加。 如 0x123 0x1234 0x1357 2.乘法、除法： 将所有的进制的数转成二进制数，然后进行移位。 如 0x123456 乘 32（十进制）…...
责任链模式：原理与实现解析，及其应用场景代入
责任链模式的作用：复用和扩展，在实际的项目开发中比较常用，特别是框架开发中，我们可以利用它们来提供框架的扩展点，能够让框架的使用者在不修改框架源码的情况下，基于扩展点定制化框架的功能。 这里主要介…...
从心理学角度看，GPT 对人有什么影响？
开启个性化AI体验：深入了解GPT的无限可能 导言 GPT 与我们日常生活的融合标志着技术进步的重大飞跃，为提高效率和创新提供了前所未有的机遇。然而，当我们与这些智能系统日益紧密地交织在一起时，探索它们对个人产生的细微的心理影响…...
【C语言/数据结构】栈：从概念到两种存储结构的实现
目录 一、栈的概念 二、栈的两种实现方式 1.顺序表实现栈 2.链表实现栈 三、栈的顺序存储结构及其实现 1.栈的声明 2.栈的初始化 3.栈的销毁 4.栈的压栈 5.栈的弹栈 6.栈的判空 7.返回栈顶元素 8.返回栈的长度 四、栈的链式存储结构及其实现 1.栈的声明 2.栈的…...
47. UE5 RPG 实现角色死亡效果
在上一篇文章中，我们实现了敌人受到攻击后会播放受击动画，并且还给角色设置了受击标签。并在角色受击时，在角色身上挂上受击标签，在c里，如果挂载了此标签，速度将降为0 。 受击有了，接下来我们将…...
C语言/数据结构——每日一题（环形链表）
一.前言 今天在力扣上刷到一道链表题——环形链表https://leetcode.cn/problems/linked-list-cycle 想着和大家们分享一下。让我们直接开始今天的分享吧。、 二.正文 1.1题目描述 1.2题目分析 这道题是想让我们做出分析，该链表是不是带环链表，如果是…...
vue：网页icon无法显示
logo文件放在public文件夹下，在html里设置icon。 本地源码运行后发现网页icon无法显示我们设置的logo，而是显示了浏览器默认icon。 这个问题不需要解决，部署后网页icon显示就正常了。...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...