news 2026/1/31 15:18:02

初始React@1

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
初始React@1

从今天开始学习React,学习笔记记录。

参考来源:https://www.bilibili.com/video/BV1wy4y1D7JT?p=5&vd_source=ee72dd280771c701b7484b49fa600ff3

一、React简介

1、官网

英文官网:https://reactjs.org/

中文官网:https://react.docschina.org/

2、介绍描述

1)用于动态构建用户界面的JavaScript(只关注于视图)

2)由Facebook开源

3、React的特点

1)声明式编码

2)组件化编码

3)React Native编写原生应用

4)高效(优秀的Diffing算法)

4、React高效的原因

1)使用虚拟(virtual)DOM,不总是直接操作页面真实DOM

2)DOM Diffing算法,最小化页面重绘

二、Hello React

1、项目结构

2、代码片段

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello-react</title> </head> <body> <!-- 准备好一个容器--> <div id="test"></div> <!-- 引入react核心库--> <script src="../js/react.development.js" type="text/javascript"></script> <!-- 引入react-dom, 用于支持react操作dom--> <script src="../js/react-dom.development.js" type="text/javascript"></script> <!-- 引入babel, 用于将jsx 转为js--> <script src="../js/babel.min.js" type="text/javascript"></script> <script type="text/babel"> /*这里一定要写babel*/ //1 创建虚拟DOM const vDom = <h1>Hello,React</h1>/*此处一定不要写引号,因为不是字符串*/ //2 渲染虚拟dom到页面 ReactDOM.render(vDom, document.getElementById('test')); </script> </body> </html>

3、运行结果

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/1/24 11:25:32

一块8088单板机,桌面上的技术玩具

我的书桌左上角&#xff0c;常年搁着一块巴掌大的墨绿色电路板。在双屏显示器、机械键盘和无线充电座的包围中&#xff0c;它显得如此突兀——四十年前的8088单板机&#xff0c;像一位误入数字盛宴的旧时代绅士&#xff0c;沉默地躺在3D打印的亚克力底座上。 一、时光的琥珀这…

作者头像 李华
网站建设 2026/1/29 7:13:13

数字签名与数字证书

在介绍数字签名和数字证书前&#xff0c;先简单了解两个算法&#xff1a;Hash算法和RSA算法。 Hash算法&#xff1a;Hash算法是将可变长度的数据块M作为输入&#xff0c;产生固定长度的Hash值&#xff08;或者叫做摘要&#xff09;。可以将Hash算法看作一个非常复杂的CRC算法&…

作者头像 李华
网站建设 2026/1/29 11:22:51

国密算法全家桶:一文认清 SM 系列 “安全卫士”

一、除了加密还能干嘛 加密技术主要分为三大类&#xff1a;对称加密、非对称加密 和 哈希算法。 加密不仅仅是加密数据那么简单&#xff0c;已经被玩出花来了 在当前数字化时代&#xff0c;无论是支付缴费、身份认证还是业务数据处理&#xff0c;都需要密码技术构筑安全屏障…

作者头像 李华
网站建设 2026/1/31 9:36:06

RocketMQ的事务消息是如何实现的?

RocketMQ 通过 TransactionListener 接口实现事务消息机制&#xff0c;其工作流程如下&#xff1a;发送半消息首先向 Broker 发送一条半消息&#xff08;状态标记为"prepared"&#xff09;&#xff0c;该消息会被存储在事务日志中但暂不可消费。执行本地事务半消息发…

作者头像 李华
网站建设 2026/1/29 23:19:19

招标平台最难的战斗:在持续变化中保持数据稳定与精准

招标平台的“动态数据治理”&#xff1a;如何应对政策变化、源站改版与信息规范的持续挑战&#xff1f; 一个稳定的招标信息服务平台&#xff0c;其后台并非一成不变。相反&#xff0c;它运行在一个充满动态变化的环境中&#xff1a;采购政策频繁调整、各级官方招标公告网改版…

作者头像 李华