React的基本认识
官网:https://react.docschina.org/
什么是React
React是用于构建用户界面的JavaScript库（react只关注界面(视图)）
React是一个将数据渲染为HTML视图的开源JavaScript库
-
在页面上需要展示一些学生的信息，大概需要三步：
-
发送请求获取数据
-
处理数据（过滤、整理格式等）
-
操作DOM呈现页面 (react做的事情)
-
由谁开发的
-
由Facebook开发，且开源。
-
起初由Facebook的软件工程师Jordan Walike创建。
-
于2011年部署于Facebook的newsfeed
-
随后在2012年部署于Instagram
-
2013年5月宣布开源
为什么要学？
-
原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
-
document.getElementById('app')
-
document.querySelector('#app)
-
document.getElementsByTagName('span)
-
-
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
-
原生JavaScript没有组件化编码方案，代码复用率低。
React的特点
-
采用组件化模式，声明式编码，提高开发效率及组件复用率。（命令式编码/声明式编码）
-
组件式编码
-
在React Native中可以使用React语法进行移动端开发
-
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互
React高效的原因
-
1） 虚拟（virtual）DOM，不总是直接操作DOM。（批量修改，重绘次数少）
-
2） DOM Diff 算法，最小化页面重绘。减小更新的区域。
React的基本使用
Hello,React 的demo
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../../../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script src="../../../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../../../js/babel.js"></script>
<script type="text/babel"> // 此处一定要写babel
// 1、创建虚拟DOM
const VDOM = <h1>Hello,React</h1> // 此处一定不要写引号，因为不是字符串
// 2、渲染虚拟DOM到页面
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
相关的js库
-
react.js:react的核心库
-
react-dom.js : 提供操作DOM的react的扩展库
-
babel.js: ES6转ES5、解析JSX语法代码转为纯js语法代码的库
创建虚拟DOM的两种方式
纯js方式（一般不用）
// React.createElement(标签名字，标签属性，标签内容)
const VDOM = React.createElement('h1',{id:"title"},"Hello,React")
// 创建复杂一点的虚拟DOM
const VDOM1 = React.createElement('h1',{id:"title"},React.createElement('span',{},"Hello,React"))
JSX方式
const VDOM = <h1 id="title">Hello,React</h1>
// 创建复杂一点的虚拟DOM
const VDOM1 = <h1 id="title"> <span>Hello,React</span> </h1>
注意：JSX方式比纯js方式简单。
虚拟DOM与真实DOM
虚拟DOM与真实DOM在控制台打印出的结果
-
本质上是Object类型的对象（一般对象）。
-
React 提供了一些API来创建一种‘特别’的一般js对象
-
var element = React.createElement('h1',{id:"myTitle"},'hello')
-
上面创建的就是一个简单的虚拟DOM对象。
-
-
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多操作。
-
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
-
我们编码时基本只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面。
React JSX
JSX
-
全称：JavaScript XML（可扩展标签）
-
react定义的一种类似于XML的js扩展语法：js+XML
-
本质上是React.createElement(component.props,....children)方法的语法糖。
-
作用：用来简化创建虚拟DOM
-
写法：
var ele = <h1>Hello JSX</h1> -
注意1:它不是字符串，也不是HTML/XML标签
-
注意2:它最终产生的就是一个js对象
-
-
标签名和标签属性
-
标签名任意：HTML标签或其他标签
-
标签属性任意：HTML标签属性或其他
-
-
基本语法规则
-
定义虚拟DOM，不要写引号。
-
在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
-
样式的类名指定不要用class，要用className
-
内联样式，要用style={{key:value}}的形式去写。（camelCase语法 骆驼拼写法）
-
只有1个根标签
-
标签必须闭合
<input type="text" /> -
标签首字母
-
若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
-
若大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错。
- 注释语法： {/注释.../}
-
-
遇到 < 开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析。
-
遇到以 { 开头的代码，以js语法解析：标签中的js代码必须用{}包含。
-
babel.js的作用
-
浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行。
-
只要用了JSX，都要加上type=“text/babel”，声明需要babel来处理。
-
const myId = "TIT";
const myData = "Hello,React"
var myStyle = {
fontSize: 30,
color: '#fff'
};
// 1、创建虚拟DOM
const VDOM = (
<div>
{/*注释...*/}
<h2 id={myId.toLocaleLowerCase()} className="title">
<span style = {myStyle}>{myData.toLocaleLowerCase()}</span>
</h2>
<input type="text" />
</div>
) // 此处一定不要写引号，因为不是字符串
// 2、渲染虚拟DOM到页面
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM 虚拟DOM, containerDOM DOM容器)
作用： 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
-
参数一: 纯js或jsx创建的虚拟dom对象
-
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
demo：动态展示列表
var data = ['angular','react','vue']
// 1、创建虚拟DOM
const VDOM = (
<div>
<h1>前端技术列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
// 2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
在 JSX 中使用 JavaScript 表达式。
一定注意区分：【js语法（代码）】与【js表达式】
-
表示式：一个表达式会产生一个值，可以放在任何一个需要值的地方。下面这些都是表示式：
-
a
-
a+b
-
demo(1)
-
arr.map()
-
function test(){}
-
-
语句（代码）： 下面这些都是语句（代码）
-
if(){}
-
for(){}
-
swich(){case:xxxx}
-
react 遍历数组 （结合 key 的使用）
-
使用 map 进行遍历数组
-
需要使用到 key 值
-
key 的值一定要是唯一的内容，不能重复
-
通常，我们使用数据中的 id 来作为元素的 key
-
当元素没有确定 id的时候，万不得已你可以使用元素索引index 作为 key 但一般不使用index作为key
-
如果不使用key，会报错
模块与组件、模块化与组件化的理解
4.1 模块（js文件）
-
理解：向外提供特定功能的js程序，一般就是一个js文件。
-
为什么要拆成模块：随着业务逻辑增加，js代码越来越多且复杂。
-
作用：复用js，简化js的编写，提高js的运行效率。
4.2 组件
-
理解：用来实现特定（局部）功能效果的代码和资源的集合（html/css/js/images等）（一个界面的局部功能模块）
-
为什么：一个界面的功能更复杂
-
作用：复用编码，简化项目编码，提高运行效率
4.3 模块化
当应用的js都以模块来编写的话，这个应用就是一个模块化的应用。
4.3 组件化
当应用是以多组件的方式实现的，这个应用就是一个组件化的应用。