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

相关文章:

  • pyspark分布式部署随机森林算法
  • 学习python的第7天,她不再开放她的听歌榜单
  • 【es6 】中的装饰器 decorator 到底是什么,有什么用,和ts 中的装饰器decorator有啥区别
  • 包装类详解
  • FPS游戏之漫谈Shader.globalMaximumLOD
  • 【Elasticsearch专栏 18】深入探索:Elasticsearch核心配置与性能调优 保姆级教程 企业级实战
  • 【Antd】Form 表单获取不到 Input 的值
  • DataGear制作基于three.js的3D数据可视化看板
  • 提升Vue3应用效率的秘诀:深入比较ref与reactive!
  • ubuntu 安装jdk8
  • C语言中的套娃——函数递归
  • 【力扣白嫖日记】178.分数排名
  • 基于JavaWeb实现的校园新闻发布系统
  • 国产替代MATLAB的征途
  • 推荐收藏!科大讯飞算法岗(NLP 方向)面试题7道(含答案)
  • 2019年如何成为全栈工程师?
  • angular学习第一篇-----环境搭建
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • GitUp, 你不可错过的秀外慧中的git工具
  • JAVA_NIO系列——Channel和Buffer详解
  • Java到底能干嘛?
  • js作用域和this的理解
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • Netty源码解析1-Buffer
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • SegmentFault 2015 Top Rank
  • Vue 2.3、2.4 知识点小结
  • 闭包,sync使用细节
  • 二维平面内的碰撞检测【一】
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
  • 前端面试之闭包
  • 区块链分支循环
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 新手搭建网站的主要流程
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 栈实现走出迷宫(C++)
  • postgresql行列转换函数
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • #{}和${}的区别是什么 -- java面试
  • #define与typedef区别
  • #etcd#安装时出错
  • #laravel 通过手动安装依赖PHPExcel#
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • (C语言)共用体union的用法举例
  • (ros//EnvironmentVariables)ros环境变量
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (十六)一篇文章学会Java的常用API
  • (转)甲方乙方——赵民谈找工作
  • (转载)Linux 多线程条件变量同步