目录
一、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.组件化：
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
2931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
