React之旅基础篇(一)

React简介

英文文档：react英文文档
中文文档：react中文文档

是什么？

• 用户构建用户界面的JavaScript库
• 是一个将数据渲染为HTML视图的开源JavaScript库

谁开发的？

• 由FaceBook开发，且开源

为什么学？

原生js的痛点：

• 原生js操作DOM繁琐 效率低 （DOM-API 操作 UI）
• jq仅仅只是代码量变少，也是效率低，会让浏览器反复的重绘重排
• 没有组件化编码方案，代码复用率低 组件化一拆到底html和css和js

react的特点：

• 采用组件化模式 声明式编码 提高开发效率及组件复用率
• 在react Native（前端人员通过js编写android ios应用的技术）中可以使用React语法进行移动端开发
• 使用虚拟DOM 高效的Diffing算法 尽量减少操作真实的DOM渲染

React入门

相关js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库。

效果

<!-- 准备好容器 -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作Dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx 转为 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>

<!-- jsx：此处一定写babel，表示写的不在是js而是jsx靠babel翻译 -->
<script type="text/babel">
    // 1.创建虚拟DOM
    const VDOM = <h1>Hello React</h1>  /* 此处一定不要加引号，因为不是字符串 */
    // 2.渲染虚拟DOM到页面 ReactDOM.render(虚拟DOM，容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

创建虚拟DOM的两种方式

jsx方式

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

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>

<script type="text/babel">
	const VDOM = ( // 可以用括号包住，表示一个整体
    	<h1 id="title">
			<span>Hello,React</span>
		</h1>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

js方式

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

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script type="text/javascript">
	// const VDOM = React.createElement(标签,属性名,内容)  创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟DOM与真实DOM

关于虚拟DOM

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