【React】React学习笔记一：初识React+虚拟DOM+jsx+模块

学习视频链接

一、初识React

介绍：

• 用于动态构建用户界面的 JavaScript 库(只关注于视图)
• 由Facebook开源

特点：

• 声明式编码
• 组件化编码
• React Native 编写原生应用
• 高效（优秀的Diffing算法）

二、虚拟DOM创建

0.虚拟DOM是什么？

• 本质是Object类型的对象（一般对象）
• 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
• 虚拟DOM最终会被React 转化为真实DOM，呈现在页面上。

1.使用jsx创建

<div id="test"></div>

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

2.使用js创建

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

三、jsx学习

1.语法规则

• 定义虚拟DOM时，不要写引号。
• 标签中混入JS表达式时要用**{}**。
• 样式的类名指定不要用class，要用className。
• 内联样式，要用**style={{key:value}}**的形式去写。
• 只有一个根标签
• 标签必须闭合
• 标签首字母
  • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'

//1.创建虚拟DOM
const VDOM = (
	<div>
		<h2 className="title" id={myId.toLowerCase()}>
			<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
		</h2>
		<h2 className="title" id={myId.toUpperCase()}>
			<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
		</h2>
		<input type="text"/>
	</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

2.js表达式 与 js语句 的区别

一定注意区分：js语句(代码)与js表达式

• 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：
(1).a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test () {}

• 语句(代码)：

下面这些都是语句(代码)：
(1) if(){}
(2) for(){}
(3) switch(){case:xxxx}

//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
	<div>
		<h1>前端js框架列表</h1>
		<ul>
			{
				data.map((item,index)=>{
					return <li key={index}>{item}</li>
				})
			}
		</ul>
	</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

四、模块与组件、模块化与组件化的理解

（1）模块

• 理解：向外提供特定功能的js程序, 一般就是一个js文件
• 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
• 作用：复用js, 简化js的编写, 提高js运行效率

（2）组件

• 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
• 为什么要用组件： 一个界面的功能更复杂
• 作用：复用编码, 简化项目编码, 提高运行效率

（3）模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

（4）组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用