BS开发扫盲篇-前端技术风云录
React技术栈-react的基本使用
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
英文网站：
https://reactjs.org/ 中文网站:
https://react.docschina.org/
由Facebook开源的用于构建用户界面的JavaScript库(只关注于View)。
声明式:
React使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时React能有效地更新并正确地渲染组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。 组件化:
创建拥有各自状态的组件，再由这些组件构成更加复杂的UI。
组件逻辑使用JavaScript编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与DOM分离。 一次学习，随处编写:
无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。 高效:
减少更新的次数:
虚拟(virtual)DOM(是真实的DOM的一种映射关系), 不总是直接操作DOM,当页面需要修改时优先修改的是虚拟(virtual)DOM，间隔一段时间后，React的虚拟(virtual)DOM会自动批量修改真实的DOM。
减少更新的区域:
DOM Diff算法(计算页面哪些地方变化了哪些地方没有发生变化，从而确定了需要修改的区域), 避免整个页面变更，只修改发生变化的区域，即最小化页面重绘
下载地址：
https://www.bootcdn.cn/react/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>
<div id="box1">666</div>
</body> <!--在页面中导入JS-->
<!--导入 React的核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--导入提供操作DOM的react扩展库-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--导入解析JSX语法代码转为纯JS语法代码的库-->
<script type="text/javascript" src="../js/babel.min.js"></script> <!--'type="text/babel"'表示告诉"../js/babel.min.js"解析里面的JSX的代码-->
<script type="text/babel">
//创建虚拟DOM元素对象,不是字符串
var vDom = <h1>Hello React!</h1> //将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom,document.getElementById("box1")) </script>
</html>
BS开发扫盲篇-前端技术风云录的更多相关文章
- web前端技术与原生技术的竞争, 及未来的发展
用户界面领域: web技术与原生技术之争 除了浏览器中运行之外, html5的技术也在app领域和移动端的安卓, iOS, 以及桌面端的window, linux以及OS X展开了竞争. 同样属于用户 ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...
- 解密国内BAT等大厂前端技术体系-腾讯篇（长文建议收藏）
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- iOS开发——高级技术精选&底层开发之越狱开发第一篇
底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...
随机推荐
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案之点播分享
背景介绍 EasyDSS流媒体服务器软件,提供一站式的视频上传.转码.点播.直播.时移回放等服务,极大地简化了开发和集成的工作.其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像 ...
- 记一次偶发的bug排查——redis-py-cluster库的bug
排查流水账: 通过平台监控,发现很多偶发的查看推荐列表的接口时延大于0.5s 写单元测试,不能重现.在测试环境不能重现.只有在正式环境可以偶发重现. 通过日志埋点,等待重现 不断地加日志埋点后发现耗 ...
- vue-loader会缓存node_modules中依赖模块
问题如下: https://github.com/vuejs/vue-cli/issues/3635 截止到vue cli3还没有解决 手动删除node_modules下的.cache文件夹可以解决这 ...
- [LeetCode] 334. Increasing Triplet Subsequence 递增三元子序列
Given an unsorted array return whether an increasing subsequence of length 3 exists or not in the ar ...
- 聚焦JavaScript面向对象的思想
面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...
- Mybaties的简单使用(全当做复习了)
在使用mybaties的时候,最容易忘掉的是他的动态SQL,不过网上有关这方面的文章很多. 在动态SQl中最常见的几种SQL的语法就是: if choose (when, otherwise) tri ...
- 高并发 多线程批量ping工具 nbping简介和使用
nbping 简介 nbping是为解决局域网大批量IP实例或主机探活,采用go协程并发处理,可以自定义并发的协程数量和输出结果.效率远高于现有的批量ping工具. nbping具备如下特性 - 支持 ...
- head first c# -- 第七章 （接口与抽象类）
接口的作用: 例子:有鸡,鸭,牛,羊4个类,还有farmer类: farmer.feed(obj obj) { obj.eat() } // 没有接口: farmer.feedChicken(Chic ...
- Java核心技术梳理-类加载机制与反射
一.引言 反射机制是一个非常好用的机制,C#和Java中都有反射,反射机制简单来说就是在程序运行状态时,对于任意一个类,能够知道这个类的所有属性和方法,对于任意一个对象,能够调用它的任意属性和方法,其 ...
- Java File类 mkdir 不能创建多层目录
File f = new File("/home/jp/Upload"); if ((!f.exists()) || (!f.isDirectory())) {boolean re ...