做网站怎么接活,机械加工制造网,企业专属空间,基于lamp网站建设实例第一章 React入门
一、React简介
1. 是什么#xff1f;
是一个将数据渲染为HTML视图的开源JavaScript库。
2. 谁开发的#xff1f;
由Facebook开源
3. 为什么要学#xff1f; 原生JavaScript操作DOM繁琐#xff0c;效率低#xff08;DOM-API 操作 UI#xff09; 使…第一章 React入门
一、React简介
1. 是什么
是一个将数据渲染为HTML视图的开源JavaScript库。
2. 谁开发的
由Facebook开源
3. 为什么要学 原生JavaScript操作DOM繁琐效率低DOM-API 操作 UI 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排 原生JS没有组件化编码方案代码复用低
4. React的特点
采用组件化模式声明式编码提高开发效率及组件复用率在React Native中可以使用React语法进行移动端开发使用虚拟DOM优秀的Diffing算法尽量减少与真实DOM的交互 5. React高效的原因
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。
二、React的基本使用
1. 效果 2. 相关js库
react.jsReact核心库。react-dom.js提供操作DOM的react扩展库。babel.min.js解析JSX语法代码转为JS代码的库。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlehello_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!-- 引入babel用于将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
/html3. 创建虚拟DOM的两种方式 纯JS方式(一般不用)JSX方式
!DOCTYPE html
html langen
headmeta charsetUTF-8title1_使用jsx创建虚拟DOM/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!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM ( /* 此处一定不要写引号因为不是字符串 */h1 idtitlespanHello,React/span/h1)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8title2_使用js创建虚拟DOM/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/scriptscript typetext/javascript //1.创建虚拟DOMconst VDOM React.createElement(h1,{id:title},React.createElement(span,{},Hello,React))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/script
/body
/html4. 虚拟DOM与真实DOM
4.1 React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM React.createElement(‘xx’,{id:‘xx’},‘xx’)上面创建的就是一个简单的虚拟DOM对象
4.2 虚拟DOM对象最终都会被React转换为真实的DOM
4.3 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。
!DOCTYPE html
html langen
headmeta charsetUTF-8title3_虚拟DOM与真实DOM/title
/head
body!-- 准备好一个“容器” --div idtest/divdiv iddemo/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!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM ( /* 此处一定不要写引号因为不是字符串 */h1 idtitlespanHello,React/span/h1)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))const TDOM document.getElementById(demo)console.log(虚拟DOM,VDOM);console.log(真实DOM,TDOM);debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* 关于虚拟DOM1.本质是Object类型的对象一般对象2.虚拟DOM比较“轻”真实DOM比较“重”因为虚拟DOM是React内部在用无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM呈现在页面上。*//script
/body
/html三、React JSX
1. 效果 2. JSX
全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法: JS XML本质是React.createElement(component, props, …children)方法的语法糖作用: 用来简化创建虚拟DOM 写法var ele h1Hello JSX!/h1注意1它不是字符串, 也不是HTML/XML标签注意2它最终产生的就是一个JS对象 标签名任意: HTML标签或其它标签标签属性任意: HTML标签属性或其它基本语法规则 遇到 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析遇到以 { 开头的代码以JS语法解析: 标签中的js表达式必须用{ }包含 babel.js的作用 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行只要用了JSX都要加上type“text/babel”, 声明需要babel来处理
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejsx语法规则/titlestyle.title{background-color: orange;width: 200px;}/style
/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!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel const myId aLeXconst myData HeLlo,rEaCt//1.创建虚拟DOMconst VDOM (divh2 classNametitle id{myId.toLowerCase()}span style{{color:white,fontSize:29px}}{myData.toLowerCase()}/span/h2h2 classNametitle id{myId.toUpperCase()}span style{{color:white,fontSize:29px}}{myData.toLowerCase()}/span/h2input typetext//div)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/* jsx语法规则1.定义虚拟DOM时不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class要用className。4.内联样式要用style{{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头则将该标签转为html中同名元素若html中无该标签对应的同名元素则报错。(2).若大写字母开头react就去渲染对应的组件若组件没有定义则报错。*//script
/body
/html3. 渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM, containerDOM)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示参数说明 参数一: 纯js或jsx创建的虚拟dom对象参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
4. JSX练习
需求: 动态展示如下列表
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejsx小练习/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!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel /* 一定注意区分【js语句(代码)】与【js表达式】1.表达式一个表达式会产生一个值可以放在任何一个需要值的地方下面这些都是表达式(1). a(2). ab(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)下面这些都是语句(代码)(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data [Angular,React,Vue]//1.创建虚拟DOMconst VDOM (divh1前端js框架列表/h1ul{data.map((item,index){return li key{index}{item}/li})}/ul/div)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById(test))/script
/body
/html四、模块与组件、模块化与组件化的理解
1.模块
理解向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块随着业务逻辑增加代码越来越多且复杂作用复用js, 简化js的编写, 提高js运行效率
2. 组件
理解用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件 一个界面的功能更复杂作用复用编码, 简化项目编码, 提高运行效率
3. 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
4. 组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
