4.13 Work Day5 ——React学习

版本：16.x

引入好相应的js文件（babel.min.js 是jsx 编译转换为js的）

 

①创建虚拟DOM： 

在script外    ——————     <div id="test"> “这里是容器”</div>

const VDOM= <h1>HELLOW！</h1>

②渲染虚拟DOM到页面：

ReactDOM.render(x,y) ————ReactDOM.render(VDOM,document.getElementById（''）)

一、

——创建虚拟DOM的两种方式 主要用JSX

——JSX是 创建虚拟DOM的语法糖 例：

①JS创建虚拟DOM：

const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))

②JSX创建虚拟DOM：

const VDOM = <h1 id="title"><span>Hello,React</span></h1>

一般写成：

	const VDOM = ( 
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)

①②它们是等价的👆

(

帅气如React也有.creatElement  ——————————【document.creatElement 创建的是真实DOM，React.creatElement创虚拟DOM~ 】

此API接受三个参数 ————React.creatElement（标签名，标签属性，标签内容）

)

二、虚拟DOM与真实DOM

虚拟dom本质是object

虚拟dom身上属性少（轻）（只需要够react用就行），真实dom多

它最终会被React转化到页面上

三、JSX语法规则细则：

1.定义虚拟dom NO引号

2.标签中混入JS表达式时 要用{} 套起来

3.用css标签时（类选择器）  class换成className

4.用css标签时（内联样式） 用style={{key:value}}的形式

5.只能有一个跟标签、标签要闭合、标签首字母小写就转化为html同名 大写就找对应的定义的组件

 

四、React 可自动遍历数组，对象不可以

ps 补充 三、2 

JS表达式定义：指的是有返回值的  arr.map()、function test1(){}、 a、a+b.................

JS语句：if()、for() 、switch()......这些不可以用{}

五、组件化 模块化 并且基于Chrome安装开发者工具

复用代码提高效率 ：

例 只需要写好第一个的样式结构方法 后面的每一个div去用它并且替换相应的图片URL、点赞数、...

 

 

 

 

 

 

 

 

 

 

 

 

 

{混合app开发——React Native （后续学习）

前端流行框架+技术  

用到ES6语法（ class const let  =>  解构赋值

HybirdApp 混合开发

}