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,我们只需要了解这个概念。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF中如何使用HandyCotrol控件库

HandyControl介绍 HandyControl是一个开源的WPF&#xff08;Windows Presentation Foundation&#xff09;控件库&#xff0c;旨在简化WPF应用程序的开发过程并提高用户界面的美观程度和易用性。它提供了丰富的控件、样式和模板&#xff0c;可以帮助开发人员快速构建出现代化的…

前端 实现 每5分钟遍历一次集控的数据接口,将多类型的统计结果insert到TD数据库的指标统

涉及点&#xff1a; setInterval 定时任务。axios 请求. env配置项。 // 引入所需模块 const axios require(axios); // 发送HTTP请求 const moment require(moment); // 处理日期时间 require(dotenv).config(); // 加载.env文件中的配置信息// TD数据库连接参数 const tdA…

早春女童氛围感穿搭~绝美的新中式

古典的山树绣花设计 精致典雅&#xff0c;上身立体又轻盈 做了粉绿两色&#xff0c;很适合春天的氛围 春天是个适合外出游玩的季节 穿上这件出游真的超美&#xff0c;日常穿也可 超出片很吸睛&#xff01;&#xff01;

LeetCode 刷题 [C++] 第438题.找到字符串中所有字母异位词

题目描述 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 题目分析 在字符串 s中使用同向双指针来查…

远程控制APP,高效生活的秘诀!

在这个科技日新月异的时代&#xff0c;我们的生活被各种手机软件所包围。几乎每个人都有一个甚至多个手机&#xff0c;你是否也有遇到过需要远程操作自己某一台手机的场景呢&#xff1f;今天&#xff0c;我要向大家推荐一款神奇的手机远程操作神器&#xff0c;让你可以随时随地…

一文读懂 Python 值传递和引用传递

文章目录 版本前言形参和实参值传递和引用传递Python 变量存储值语义和引用语义值语义引用语义 探讨 Python 值传递和引用传递不可变&#xff08;immutable&#xff09;类型可变&#xff08;mutable&#xff09;类型案例一案例二 拓展&#xff1a;不可变类型真的不可变&#xf…

探索 Sora 背后的核心技术

2024年2月16日&#xff0c;OpenAI发布Sora文生视频模型&#xff0c;一石激起千层浪&#xff0c;迅速刷屏爆火于整个AI圈。一方面&#xff0c;Sora从文本、图像迈向视频大模型&#xff0c;这可以说是通向通用人工智能的里程碑事件&#xff1b;另一方面&#xff0c;训练和推理需求…

设计模式(三)建造者模式

相关文章设计模式系列 1.建造者模式简介 定义 建造者模式&#xff08;builder&#xff09;&#xff0c;将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 简介 建造者模式&#xff08;builder&#xff09;是创建一个复杂对象的创建型…

【Nuxt3】Tailwind 项目去除页面滚动条

【Nuxt3】Tailwind 项目去除页面滚动条 在Web开发中&#xff0c;滚动条是一个常见的用户界面元素&#xff0c;但有时候我们希望在某些页面上去除滚动条&#xff0c;以便提供更好的用户体验。在Nuxt3项目中&#xff0c;我们可以使用Tailwind CSS来实现这个功能。 Tailwind CSS…

2024图像处理分析与信息工程国际学术会议(IACIPIE2024)

2024图像处理分析与信息工程国际学术会议(IACIPIE2024) 会议简介 2024图像处理分析与信息工程国际学术会议&#xff08;IACIPIE2024&#xff09;将在中国长沙举行。 IACIPIE2024是一个年度会议&#xff0c;探讨图像处理分析和信息工程相关领域的发展和影响&#xff0c;旨在介…

状态机-----

1.原理 同步的意思就是状态的跳转都是在时钟的作用下跳转的&#xff0c;有限是指状态机中状态的个数是有限的。两种状态机的共同点都是状态的跳转只和输入有关&#xff0c;区别就是如果最后的输出只和当前状态有关而与输入无关&#xff0c;则是moore型状态机。如果最后的输出不…

STM32学习3 寄存器映射和GPIO寄存器编程

STM32学习3 寄存器映射和GPIO寄存器编程 一、STM32外设内存空间1. 内存空间划分2. 区域功能说明&#xff08;1&#xff09;block0&#xff08;2&#xff09;block1&#xff08;3&#xff09;block2&#xff08;4&#xff09;block3~4&#xff08;5&#xff09;block5&#xff0…

猫咪挑食不吃猫粮怎么办?适口性高、可以改善猫咪挑食的主食冻干分享

猫咪挑食不吃猫粮怎么办&#xff1f;在现今社会&#xff0c;养猫的人越来越多&#xff0c;大家都把自家的小猫当作宝贝来宠爱。但宠爱过度有时也会导致猫咪养成挑食的坏习惯。面对这一问题&#xff0c;我们应该如何解决呢&#xff1f;今天&#xff0c;我要分享一个既能确保猫咪…

Adobe Illustrator 2022 for Mac/Win:设计的新篇章

在数字艺术和设计领域&#xff0c;Adobe Illustrator一直以其强大的功能和高效的工具受到专业人士的青睐。随着2022年的到来&#xff0c;Adobe Illustrator 2022&#xff08;简称AI 2022&#xff09;的发布无疑为设计师们带来了新的希望和期待。 一、强大的新功能 AI 2022引入…

C++ 网络编程学习二

C 网络编程学习二 asio异步写操作asio异步读操作asio 异步echo服务端asio异步服务器中存在的隐患 asio异步写操作 async_write_some是异步写的函数&#xff1a;传入buffer和回调函数以及参数以后&#xff0c;发送后会调用回调函数。 void Session::WriteToSocketErr(const st…

什么是小红书品牌笔记,如何做好达人投放?

认认真真撰写了小红书品牌笔记&#xff0c;从各个方面确保了笔记的优质程度&#xff0c;却没能产生爆文。这很可能是笔记与用户之间的中间环节出了问题&#xff0c;也就是达人投放有问题。今天我们就为大家带来什么是小红书品牌笔记&#xff0c;如何做好达人投放&#xff1f; 一…

【c语言】if 选择语句

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…

rk3568 I2C

rk3568 I2C I2C(Inter-Integrated Circuit)总线是一种串行通信协议,由Philips(现在的NXP)公司于1980年代初开发。它最初被设计用于连接不同的集成电路和集成模块,以降低系统成本和复杂度。随着时间的推移,I2C总线已经成为连接各种设备的主要标准之一。I2C总线最初只支持…

java设计模式的总结

作用 设计模式是一套被反复使用、经过验证、解决特定问题的最佳实践。它们提供了一种通用的语言&#xff0c;让软件开发者能够更轻松地理解和设计复杂的系统。设计模式有助于提升代码的可读性、可维护性、可扩展性和灵活性。 总结 现知设计模式总共可以分为三种目的型设计模…

SQL--字符串反转函数 reverse() 简单明了

字符串反转函数&#xff1a;reverse 语法: reverse(string A) 返回值: string 说明&#xff1a;返回字符串A的反转结果 举例&#xff1a; hive> select reverse(abcedfg); gfdecba