React简介--尚硅谷react全家桶笔记总结.pdfVIP

React简介--尚硅⾕react全家桶笔记总结 学习使我快乐 React简介 官⽹ 1. 2. 介绍描述 1. ⽤于动态 建⽤户界⾯的 JavaScript 库(只关注于视图) 2. 由Facebook开源 React的特点 1. 声明式编码 2. 组件化编码 3. React Native 编写原⽣应⽤ 4. ⾼效 （优秀的Diffing算法） React⾼效的原因 1. 使⽤虚拟(virtual)DOM, 不总是直接操作页⾯真实DOM。 2. DOM Diffing算法, 最⼩化页⾯重绘。 React的基本使⽤ 效果 相关js库 1. react.j s ：React核⼼库。 2. react-dom.j s ：提供操作DOM的react扩展库。 3. babel.min.j s ：解析JSX语法代码转为JS代码的库。 创建虚拟DOM的两种⽅式 1. 纯JS⽅式(⼀般不⽤) 2. JSX⽅式 虚拟DOM与真实DOM 1. React提供了⼀些API来创建⼀种 “特别” 的⼀般j s对象 const VDOM = React.createElement(xx,{id :xx},xx) 上⾯创建的就是⼀个简单的虚拟DOM对象 2. 虚拟DOM对象最终都会被React转换为真实的DOM 3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化⽽更新界。 React JSX 效果 JSX 1. 全称: JavaScript XML 2. react定义的⼀种类似于XML的JS扩展语法: JS + XML本质是 ** React.createElement(component, props, ...c ildren) **⽅法的语法糖 3. 作⽤: ⽤来简化创建虚拟DOM 1. 写法 ：var ele = Hello JSX ! 2. 注意 1：它不是字符串, 也不是HTML/XML标签 3. 注意2 ：它最终产⽣的就是⼀个JS对象 4. 标签名任意: HTML标签或其它标签 5. 标签属性任意: HTML标签属性或其它 6. 基本语法规则 1. 遇到 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析 2. 遇到以 { 开头的代码，以JS语法解析: 标签中的j s表达式必须⽤{ }包含 7. babel.j s的作⽤ 1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运⾏ 2. 只要⽤了JSX ，都要加上type= “text/babel”, 声明需要babel来处理 渲染虚拟DOM(元素) 1. 语法: ReactDOM.render(virtualDOM, containerDOM) 2. 作⽤: 将虚拟DOM元素渲染到页⾯中的真实容器DOM中显⽰ 3. 参数说明 1. 参数⼀: 纯j s或j sx创建的虚拟dom对象 2. 参数⼆: ⽤来包含虚拟DOM元素的真实dom元素对象(⼀般是⼀个div) JSX练习 需求: 动态展⽰如下列表 !DOCTYPE tml tml lang=en ead meta c arset=UT F-8 titlejsx⼩练习/title / ead body !-- 准备好 ⼀个“容器 ” -- div id=test/div !-- 引⼊react核⼼库 -- script type=text/javascript src=../js/react.development.js/script !-- 引⼊react-dom，⽤于⽀持react操作DOM -- script type=text/javascript src=../js/react-dom.development.js/script !-- 引⼊babel，⽤于将j sx转为j s -- script type=text/javascript src=../js/babel.min.js/script script type=text/babel / * ⼀