目录
一、React 介绍
1、是什么
(1)用于动态构建用户界面的 JavaScript 库(只关注于视图)
(2)发送请求获取数据
(3)处理数据(过滤、整理格式等)
(4)操作DOM呈现页面
2、React的特点
(1)采用组件化模式,声明式编码,提高开发效率和组件复用率
(2)在React Native中可以使用React语法进行移动端开发。
(3)使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。
二、React的基本使用 ——Hello React
1、先准备一个容器
<div id="root"></div>
2、引入react.js
在本案例中React只需要引入3个js文件,顺序不能乱
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
3、编码
(1)创建虚拟DOM
(2)渲染虚拟DOM到页面
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
//2.渲染虚拟DOM到页面 React没有提供选择器,所以只能用原生的方法
ReactDOM.render(VDOM,document.getElementById('root'))
三、创建虚拟DOM的两种方式
1、使用js创建虚拟DOM(createElement)
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<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>
2、使用jsx创建虚拟DOM
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" >
//1.创建虚拟DOM
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
总结:jsx创建虚拟DOM就是js创建虚拟DOM的语法糖,使用原生js在标签嵌套的时候会很麻烦,使用jsx就会很容易,类似于我们的html,有了jsx可以让我们创建虚拟DOM更加方便,通过引入babel,用于将jsx转为js其实就是将jsx转为上图的js形式。
3、关于虚拟DOM:
1.本质是Object类型的对象(一般对象)
2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,
无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
四、jsx的语法规则
1、jsx是什么
(1)全称: JavaScript XML
(2)react定义的一种类似于XML的JS扩展语法: JS + XML
(3)作用: 用来简化创建虚拟DOM
2、jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中
无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有
定义,则报错。
五、模块与组件、模块化与组件化的理解
1、模块
(1)理解:向外提供特定功能的js程序, 一般就是一个js文件
(2)为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
(3)作用:复用编码, 简化项目编码, 提高运行效率
2、模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
3、组件
(1)理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
(2)为什么要用组件: 一个界面的功能更复杂
(3)作用:复用编码, 简化项目编码, 提高运行效率
4、组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用