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

React入门简介

React简介

        react是Facebook用来创建用户界面的js库。React不是一个MVC框架,而是一个用于构建组件ui库,是一个前端界面开发工具,所以很多人认为React是MVC中的V(视图)。React的存在能够很好的解决‘构建随着时间数据不断变化的大规模应用程序’,react能够引导我们重新思考如何构建应用程序。react的核心就是封装可复用性高的组件,各个组件维护自己的状态和ui,当状态更新,自动重新渲染整个组件。

        前端主流框架有vue、react、angular。vue和react是受欢迎程度最高的框架,是MMVM框架(视图模型),angular忧郁革命性太高,每次一个新版本发布之后总是覆盖之前的版本,因此维护成本很高。

React核心思想 

React的哲学以及核心思想是封装组件,各个组件维护自己的状态和ui,当状态更改,自动更新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个dom元素,然后操作dom更改UI

 React包含的概念

1.组件

//函数式组件
function Hello(){retrun <h1>Hello,fxt</h1>
}
ReactDOM.render(<Hello>,
docoment.getElementById('root1')
)

        react应用都是构建在组件智商,上面的Hello就是一个React构建的组件,render方法会把这个组件显示在页面的上的某个原色mountNode里面,显示的内容就是<h1>Hello,fxt</h1>。

        在组件中有两个比较核心概念是props和state,这里没有进行展示,后面会学习到。props主要用来进行传值,state主要用来定义组件内部的状态。

 2.jsx

从上面的代码中可以看到HTML代码直接嵌入进js代码里面,这个就是react中的jsx语法,能够在HTML中写js,也能够在js中写HTML。对于vue重度爱好者来说使用react是非常痛苦的意见事。因为前端一直都以‘结构样式行为相分离’未开发思想,而React恰恰是让js中嵌入HTML。

3、virtual Dom 

        当组件状态state有更改的时候,react会自动调用组件的render方法重新渲染整个组件的UI。当然如果真的这样大面积的操作dom,性能会是一个很大的问题,所以React实现了一个virtual Dom ,组件dom结构就是映射到这个virtual Dom上。

        react在这个虚拟dom中实现了diff算法,当要重新渲染组件的时候,会通过diff寻找要变更的dom节点,再把这个修改更新到浏览器实际的dom节点上,所有实际上不是真的渲染整个dom树。这个虚拟dom是一个纯粹的js数据结构,所以性能上会比原生的dom快很多。以往的js或者jquery都是通过大量操作dom,或导致渲染时间很慢。react不会直接去操作dom,而是用modle来代替dom,用js生成虚拟的dom树,只有在最后一次才对dom进行操作。

4、Data Flow

‘单向数据绑定’是react推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处,虽然在一般场景下我们可能会意识不到它的存在,但不影响使用react,我们只需要了解这个概念。

相关文章:

React入门简介

React简介 react是Facebook用来创建用户界面的js库。React不是一个MVC框架&#xff0c;而是一个用于构建组件ui库&#xff0c;是一个前端界面开发工具&#xff0c;所以很多人认为React是MVC中的V&#xff08;视图&#xff09;。React的存在能够很好的解决‘构建随着时间数据不断…...

强化学习_06_pytorch-PPO实践(Hopper-v4)

一、PPO优化 PPO的简介和实践可以看笔者之前的文章 强化学习_06_pytorch-PPO实践(Pendulum-v1) 针对之前的PPO做了主要以下优化&#xff1a; batch_normalize: 在mini_batch 函数中进行adv的normalize, 加速模型对adv的学习policyNet采用beta分布(0~1): 同时增加MaxMinScale …...

Scala Intellij编译错误:idea报错xxxx“is already defined as”

今天写scala代码时,Idea报了这样的错误&#xff0c;如下图所示&#xff1a; 一般情况下原因分两种&#xff1a; 第一是我们定义的类或对象重复多次出现&#xff0c;编译器无法确定使用哪个定义。 这通常是由于以下几个原因导致的&#xff1a; 重复定义&#xff1a;在同一个文件…...

面试笔记系列五之MySql+Mybaits基础知识点整理及常见面试题

myibatis执行过程 1读取MyBatis的配置文件。 mybatis-config.xml为MyBatis的全局配置文件&#xff0c;用于配置数据库连接信息。 2加载映射文件。映射文件即SQL映射文件&#xff0c;该文件中配置了操作数据库的SQL语句&#xff0c;需要在MyBatis配置文件mybatis-config.xml中…...

掌握Pillow:Python图像处理的艺术

掌握Pillow&#xff1a;Python图像处理的艺术 引言Python与图像处理的概述Pillow库基础导入Pillow库基本概念图像的打开、保存和显示 图像操作基础图像的剪裁图像的旋转和缩放色彩转换和滤镜应用文字和图形的绘制 高级图像处理图像的合成与蒙版操作像素级操作与图像增强复杂图形…...

React最常用的几个hook

React最常用的几个Hook包括&#xff1a;useState、useEffect、useRef以及useContext。 useState&#xff1a; 用于在函数组件中添加状态管理。它返回一个数组&#xff0c;第一个元素是当前状态的值&#xff0c;第二个元素是更新状态的函数。在使用时&#xff0c;可以通过解构赋…...

自然语言处理Gensim入门:建模与模型保存

文章目录 自然语言处理Gensim入门&#xff1a;建模与模型保存关于gensim基础知识1. 模块导入2. 内部变量定义3. 主函数入口 (if __name__ __main__:)4. 加载语料库映射5. 加载和预处理语料库6. 根据方法参数选择模型训练方式7. 保存模型和变换后的语料8.代码 自然语言处理Gens…...

Windows 10中Visual Studio Code(VSCode)无法自动打开终端的解决办法

1.检查设置&#xff1a; 打开VSCode。点击左侧菜单栏的“文件”&#xff08;File&#xff09;。选择“首选项”&#xff08;Preferences&#xff09;。点击“设置”&#xff08;Settings&#xff09;。在搜索框中输入“shell”&#xff0c;然后点击“settings.json”进行编辑。…...

python dictionary 字典中的内置函数介绍及其示例

Python字典内置方法&#xff1a; 本文介绍了Python字典&#xff08;dictionary&#xff09;中的内置函数及其用法示例。字典是Python中非常常用的一种数据结构&#xff0c;它允许我们通过键&#xff08;key&#xff09;来快速查找、添加、修改或删除值&#xff08;value&#…...

pdf转word文档怎么转?分享4种转换方法

pdf转word文档怎么转&#xff1f;在日常工作中&#xff0c;我们经常遇到需要将PDF文件转换为Word文档的情况。无论是为了编辑、修改还是为了重新排版&#xff0c;将PDF转为Word都显得尤为重要。那么&#xff0c;PDF转Word文档怎么转呢&#xff1f;今天&#xff0c;就为大家分享…...

深度测试:指定DoC ID对ES写入性能的影响

在[[使用python批量写入ES索引数据]]中已经介绍了如何批量写入ES数据。基于该流程实际测试一下指定文档ID对ES性能的影响有多大。 一句话版 指定ID比不指定ID的性能下降了63%&#xff0c;且加剧趋势。 以下是测评验证的细节。 百万数据量 索引默认使用1分片和1副本。 指定…...

【JGit】 AddCommand 新增的文件不能添加到暂存区

执行git.add().addFilepattern(".").setUpdate(true).call() 。新增的文件不能添加到暂存区&#xff0c;为什么&#xff1f; 在 JGit 中&#xff0c;setUpdate(true) 方法用于在调用 AddCommand 的 addFilepattern() 方法时&#xff0c;将已跟踪文件标记为需要更新。…...

golang学习6,glang的web的restful接口传参

1.get传参 //get请求 返回json 接口传参r.GET("/getJson/:id", controller.GetUserInfo) 1.2.接收处理 package controllerimport "github.com/gin-gonic/gin"func GetUserInfo(c *gin.Context) {_ c.Param("id")ReturnSucess(c, 200, &quo…...

Carla自动驾驶仿真八:两种查找CARLA地图坐标点的方法

文章目录 前言一、通过Spectator获取坐标二、通过道路ID获取坐标总结 前言 CARLA没有直接的方法给使用者查找地图坐标点来生成车辆&#xff0c;这里推荐两种实用的方法在特定的地方生成车辆。 一、通过Spectator获取坐标 1、Spectator&#xff08;观察者&#xff09;&#xf…...

HarmonyOS | 状态管理(八) | PersistentStorage(持久化存储UI状态)

系列文章目录 1.HarmonyOS | 状态管理(一) | State装饰器 2.HarmonyOS | 状态管理(二) | Prop装饰器 3.HarmonyOS | 状态管理(三) | Link装饰器 4.HarmonyOS | 状态管理(四) | Provide和Consume装饰器 5.HarmonyOS | 状态管理(五) | Observed装饰器和ObjectLink装饰器 6.Harmo…...

Git 突破 文件尺寸限制

前言 当Git本地存储里右超过50MB&#xff0c;却又确实需要上传的时候&#xff0c;就需要用到了不是 解决 本代码就是把大文件进行拆解成小文件&#xff0c;然后上传。 等到拉取下来的时候&#xff0c;可以直接再进行合并&#xff0c;合并成原文件 代码如下&#xff0c;仅供…...

HarmonyOS开发云工程与开发云函数

创建函数 您可直接在DevEco Studio创建函数、编写函数业务代码、为函数配置调用触发器。 1.右击“cloudfunctions”目录&#xff0c;选择“New > Cloud Function”。 2.输入函数名称后&#xff0c;点击“OK”。 函数名称仅支持小写英文字母、数字、中划线&#xff08;-&a…...

SpringMVC了解

1.springMVC概述 Spring MVC&#xff08;Model-View-Controller&#xff09;是基于 Java 的 Web 应用程序框架&#xff0c;用于开发 Web 应用程序。它通过将应用程序分为模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&a…...

day44((VueJS)路由的懒加载使用 路由的元信息(meta) 路由守卫函数 vant组件库的应用)

一.路由懒加载的使用 使用原因 1.使用原因1&#xff09; 使用一般写法&#xff08;即直接填写组件的缺点&#xff09;当使用这种写法&#xff0c;页面在初次加载会将所有路由配置表的添加的组件一次性全部加载&#xff0c;如果项目中组件代码量庞大&#xff0c;就需要很长时间…...

非线性优化资料整理

做课题看了一些非线性优化的资料&#xff0c;整理一下&#xff0c;以方便查看&#xff1a; 优化的中文博客 数值优化|笔记整理&#xff08;8&#xff09;——带约束优化&#xff1a;引入&#xff0c;梯度投影法 (附代码)QP求解器对比对于MPC的QP求解器 数值优化| 二次规划的…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...