react入门级详细笔记
程序员文章站
2022-04-06 22:24:05
目录一、react的基本认识 2、 react的特点3、react高效的原因二、react的基本使用三、react jsx1、虚拟dom2、jsx3、渲染虚拟dom元素4、创建虚拟dom的方...
一、react的基本认识
1、介绍
react是用于构建用户界面的javascript库(只关注view)由facebook开源
2、 react的特点
- declarative(声明式编码)
- component-based(组件化编码)
- learn once, write anywhere(支持客户端与服务器渲染)
- 高效
- 单向数据流
3、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>
上一篇: 浅谈Python数学建模之线性规划
推荐阅读
-
戴尔vostro15 5568笔记本怎么样? 戴尔笔记本vostro15详细测评
-
三星910S3L K04笔记本怎么样? 三星910S3L笔记本详细测评
-
华硕飞行堡垒FX 4200笔记本性能如何? 华硕fx4200详细评测
-
惠普omen15笔记本怎么样? 惠普omen15详细测评
-
戴尔Latitude 3440笔记本怎么样? 戴尔3440笔记本详细评测
-
宏碁f5 572g笔记本怎么样? 宏碁 572g笔记本详细测评
-
雷神911M M4笔记本性能如何? 雷神笔记本详细测评
-
神舟Z7 SP5D1笔记本怎么样? 神舟Z7笔记本详细测评
-
微星GS73VR笔记本怎么样? 微星GS73VR详细测评
-
MAC笔记本电池保养方法详细汇总(延长电池使用寿命)