当前位置: 首页 > 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,我们只需要了解这个概念。

http://www.lryc.cn/news/307749.html

相关文章:

  • 强化学习_06_pytorch-PPO实践(Hopper-v4)
  • Scala Intellij编译错误:idea报错xxxx“is already defined as”
  • 面试笔记系列五之MySql+Mybaits基础知识点整理及常见面试题
  • 掌握Pillow:Python图像处理的艺术
  • React最常用的几个hook
  • 自然语言处理Gensim入门:建模与模型保存
  • Windows 10中Visual Studio Code(VSCode)无法自动打开终端的解决办法
  • python dictionary 字典中的内置函数介绍及其示例
  • pdf转word文档怎么转?分享4种转换方法
  • 深度测试:指定DoC ID对ES写入性能的影响
  • 【JGit】 AddCommand 新增的文件不能添加到暂存区
  • golang学习6,glang的web的restful接口传参
  • Carla自动驾驶仿真八:两种查找CARLA地图坐标点的方法
  • HarmonyOS | 状态管理(八) | PersistentStorage(持久化存储UI状态)
  • Git 突破 文件尺寸限制
  • HarmonyOS开发云工程与开发云函数
  • SpringMVC了解
  • day44((VueJS)路由的懒加载使用 路由的元信息(meta) 路由守卫函数 vant组件库的应用)
  • 非线性优化资料整理
  • 踩坑wow.js 和animate.css一起使用没有效果
  • Laravel - API 项目适用的图片验证码
  • iMazing3安全吗?好不好用?值不值得下载
  • 韩国突发:将批准比特币ETF
  • Kubernetes IoTDB系列 | IoTDB数据库同步|IoTDB数据库高可用
  • 重拾前端基础知识:CSS
  • 综合实战(volume and Compose)
  • 国际黄金价格要具体市况具体分析
  • 【python】0、超详细介绍:json、http
  • 可观测性在威胁检测和取证日志分析中的作用
  • win32com打开带密码excel