目录
一、React概述:
React – A JavaScript library for building user interfaces (reactjs.org)https://reactjs.org/
React是一个将数据渲染为HTML视图的开源JavaScript库!
React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)https://react.docschina.org/
React特点:
- 采用组件化模式、声明式编码,提高开发效率及组件开发效率及组件复用率。
- 在React Native中可以使用React语法进行移动端开发
- 使用虚拟DOM+优秀的DIFFING算法,尽量减少与真实DOM交互
二、React基本使用:
相关JavaScript库:
- react.js:React核心库
- react-dom.js:提供操作DOM的React扩展库
- babel.min.js:解析JSX语法的JavaScript代码的库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test"></div>
</body>
<!--引入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.min.js"></script>
<!--这里的type是babel用于将ES6转为ES5和jsx转换为js-->
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = <h1>Hello React !</h1> /*此处一定不能写引号,因为不是字符串,而是虚拟DOM元素*/
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</html>
1.创建虚拟DOM的两种方式:
使用JSX方式创建虚拟DOM:
JSX编写方式就是原生JavaScript编写方式的语法糖!
<!--引入babel,用于将jsx转为js-->
<script src="./js/babel.min.js"></script>
<!--这里的type是babel用于将ES6转为ES5和jsx转换为js-->
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = (
<h1>Hello React !</h1>
) /*此处一定不能写引号,因为不是字符串,而是虚拟DOM元素*/
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
使用原生JavaScript创建虚拟DOM:
创建虚拟DOM语法:
React.createElement(标签名, 标签属性(对象), 标签内容)
<script type="text/javascript">
//1.创建虚拟DOM
const VDOM = React.createElement('h1', {id:"title"}, "Hello React !!!")
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
2.虚拟DOM:
- 本质就是Object类型对象(一般对象)
- 虚拟DOM属性少,真实DOM属性多,因为虚拟DOM是React内部使用,无需像真实DOM上那么多的属性
- 虚拟DOM最终会被React转换为真实DOM,呈现在页面上
三、JSX:
1.JSX概述:
JavaScript XML
XML:早期用于存储和传输数据
- React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
- 写法:var ele = <h1>Hello JSX!</h1>
- 注意:它不是字符串, 也不是HTML/XML标签
- 注意:它最终产生的就是一个JS对象
- 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
2.基本语法规则:
- 定义虚拟DOM时,不需要使用引号包裹
- 标签中混入JavaScript表达式时要用{}
- 样式的类名指定不要用class,使用className代替
- 内联样式,要用style={{key:value}}的形式编写,样式名使用驼峰命名规则
- 虚拟DOM必须只有一个根标签
- 标签必须闭合
- 标签首字母
- 如果小写字母开头。则将标签转为html中同名元素,若html中无标签对应的同名元素,则报错
- 如果大写字母开头。React就去渲染对应的组件,若组件没有定义,则报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.myCss{
background-color: coral;
color: aquamarine;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<!--引入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.min.js"></script>
<!--这里的type是babel用于将ES6转为ES5和jsx转换为js-->
<script type="text/babel">
//提供数据:
const MyId = "id_my"
const MyData = "Hello World !!!"
//1.创建虚拟DOM
const VDOM = (
<h1 className="myCss" id={MyId.toLowerCase()}>
<span style={{color:"white"}}>{MyData.toUpperCase()}</span>
</h1>
)
/**
* JSX语法规范:
* 1.定义虚拟DOM时,不需要使用引号包裹
* 2.标签中混入JavaScript表达式时要用{}
* 3.样式的类名指定不要用class,使用className代替
* 4.内联样式,要用style={{key:value}}的形式编写
* 5.虚拟DOM必须只有一个根标签
* 6.标签必须闭合
* 7.标签首字母
* 如果小写字母开头。则将标签转为html中同名元素,若html中无标签对应的同名元素,则报错
* 如果大写字母开头。React就去渲染对应的组件,若组件没有定义,则报错
*
*/
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</html>
注意区分:JavaScript语句(代码片段)和JavaScript表达式:
- 表达式:一个表达式会产生一个返回值,可以放在任何一个需要值的地方
- 语句(代码段):没有返回值
四、模块与组件、模块化和组件化理解:
1.模块:
- 理解:向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
- 作用:复用js, 简化js的编写, 提高js运行效率
2.组件:
- 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件: 一个界面的功能更复杂
- 作用:复用编码, 简化项目编码, 提高运行效率
3.模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
4.组件化:
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用