React入门
文章目录
一、React的基本认识
1、官网
2、介绍
react是用于构建用户界面的JavaScript库(只关注view)由Facebook开源
3、 React的特点
-
Declarative(声明式编码)
-
Component-Based(组件化编码)
-
Learn Once, Write Anywhere(支持客户端与服务器渲染)
-
高效
-
单向数据流
4、React高效的原因
-
虚拟(virtual)DOM, 不总是直接操作DOM
-
DOM Diff算法, 最小化页面重绘
二、React的基本使用
1、相关js库
-
`react.js`: React的核心库
-
`react-dom.js`: 提供操作DOM的react扩展库
-
`babel.min.js`: 解析JSX语法代码转为纯JS语法代码的库
2、在页面中导入js库
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
3、编码
<script type="text/babel"> //必须声明babel
// 1、创建虚拟DOM元素
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 2、渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
三、React JSX
1、虚拟DOM
React提供了一些API来创建一种特别的一般js对象
var element = React.createElement('h1', {id:'myTitle'},'hello')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
2、JSX
-
全称: `JavaScript XML`
-
react定义的一种类似于XML的JS扩展语法:`XML+JS`
-
作用: 用来创建react虚拟DOM(元素)对象
-
var ele = <h1>Hello JSX!</h1>
-
注意1: 它不是字符串, 也不是
HTML/XML
标签 -
注意2: 它最终产生的就是一个
JS对象
-
标签名任意: HTML标签或其它标签
-
标签属性任意: HTML标签属性或其它
-
基本语法规则
-
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
-
遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含
-
`babel.js`的作用
-
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
-
只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理
3、渲染虚拟DOM元素
语法:
ReactDOM.render(virtualDOM, containerDOM)
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
作用:
将虚拟DOM元素渲染到页面中的真实容器DOM中显示
4、创建虚拟DOM的方式
纯JS方式
React.createElement('h1',{id:'myTitle'}, title
JSX方式
<h1 id='myTitle'>{title}</h1>
代码示例
<div id="app"></div>
const test1 = 'MY TEST 1'
// 1、创建虚拟dom:两种方法
var element = React.createElement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2、渲染虚拟dom
ReactDOM.render(element,document.getElementById('app'))
ReactDOM.render(element2,document.getElementById('app'))
5、React 之 Hello World
-
第一步:引入react.js相关库
<script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script>
-
第二步:定义根元素
<div id="app"></div>
-
第三步:在babel环境下写React代码
<script type="text/babel"> // 1、创建虚拟dom元素对象 var vDOM = <h1>Hello W</h1> //不是字符串 // 2、将虚拟dom渲染为页面真实dom容器中 ReactDOM.render(vDOM,document.getElementById('app')) </script>