一、是什么?
- react是用于构建用户界面的JavaScript库,是一个将数据渲染为HTML视图的开源JavaScript库。
二、为什么用?有什么好处(特点)?
1. 为什么用?用的前提?
❶原生js操作don繁琐,效率低,相当于dome—API操作UI。❷使用js直接操作到浏览器会进行大量的重绘重排。❸原生js没有组件化编码方案代码复用率低。
- 前提:掌握的js基础知识
-
❶判断this的指向
-
❷Class类
-
❸ES6语法规范。
-
❹npm包管理器
-
❺原型原型链
-
❻数组常用方法。
-
❼模块化
-
2. react好处(特点)
❶在reacto native中可以使用react语法进行移动端开发。
❷采用组件化模式声明式编码,提高开发效率及组件复用率。
❸使用虚拟dom ➕优秀的Diffing算法,尽量减少与真实dom的交互。
三、怎么用?eg:基础使用
❶准备好一个容器id为test的div
❷依次引入react和核心库、引入react-dom用于支持react操作dom、引入balbel用于将jsx转化为js
【注】js标签里面的type="text/JavaScript"改为type="text/balel"表示写的不再是js,而是靠barber翻译的jsx,然后开始在js标签里面写
❸创建虚拟dom
const VDOM=<h1>hello react</h1> //需要注意的是,此处一定不要写引号,因为不是字符串。原生js的HTML字符串要加单引号、而jsx的标签可以和js混着写。
【注意比较】 js操作虚拟dom🆚jsx操作虚拟dom
❹渲染虚拟dom到页面
ReactDOM.render(虚拟dom,容器)//此处为ReactDOM.render(VDOM,document.getELemebtById('test'))