电子商务网站开发策划,网站百度收录变少,天津建设教育培训网,wordpress上传主题过期目录
1.什么是React#xff1f;
2.谁开发的
3.为什么要学React#xff1f;
4.React的特点#xff1f;
5.React依赖包 6.第一个React程序
7.虚拟DOM的两种创建方法
8.虚拟DOM和真实DOM 1.什么是React#xff1f;
用于构建用户界面的JavaScript库#xff0c;是一个将…目录
1.什么是React
2.谁开发的
3.为什么要学React
4.React的特点
5.React依赖包 6.第一个React程序
7.虚拟DOM的两种创建方法
8.虚拟DOM和真实DOM 1.什么是React
用于构建用户界面的JavaScript库是一个将数据渲染成HTML视图的开源JavaScript库。
以前处理一个页面
1.发送请求获取数据
2.处理数据过滤、整理格式等
3.操作DOM呈现页面
现在第三步交给React去做。 2.谁开发的 3.为什么要学React
1.原生JavaScript操作DOM繁琐效率低DOM-API操作UI。
2.使用JavaScript直接操作DOM浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化的编码方案代码服用效率低。 4.React的特点
1.采用组件化模式、声明式编码提高开发效率及组件复用率。
声明式就是直接说你要干什么不用一步步命令对方起身穿衣服刷牙而是直接让对方刷牙。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM优秀Diffing算法尽量减少与真实DOM的交互。 原先是直接对真实DOM进行操作现在是对应一个虚拟DOM它存在内存里当加一个数据时原先是把全部的数据都加载一遍现在虚拟DOM会进行比较重复数据的就不会重新提交只有新增的数据操作真实DOM。 5.React依赖包
React 是用jsx写的不是js
babel.main.js 的作用 ES6 ES5 、jsx js
react.devolopment.js react核心库
react.dom.development.js react操作DOMreact拓展库 6.第一个React程序 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehello react/title
/head
body!-- 准备好一个容器 --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-DOM用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入bable用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel/* 此处一定要写babel*///1.创建虚拟DOMconst VDOM h1Hello react!!!/h1 /*此处一定不要写引号因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/script
/body
/html 7.虚拟DOM的两种创建方法
开发过程中使用jsx方式jsx就是js在创建虚拟DOM时太繁琐而出现的技术但是浏览器识别不了babel在浏览器运行时也是把jsx转换为js运行只是方便了我们操作。
语法糖就是一种技术的简化方式。 1.jsx的方式 2.js方式 8.虚拟DOM和真实DOM
div iddemo/div这就是一个真实DOM。
const TDOM document.getElementById(demo);
TDOM 就是一个真实DOM 下如就是虚拟DOM虚拟DOM就是一个object类型的对象。 虚拟DOM身上的属性很少所以较轻真实则很多重。
