React基础知识以及jsx语法
先附上React官网 ,有很多问题都要通过查询官方文档来解决,要学会查文档~
React 简介
关于 React
整几个面试题来认识一下~~
什么是 React ?
React 是一个用于构建用户界面的 JavaScript 库。
- 是一个将数据渲染为 HTML 视图的开源 JS 库
- 它遵循基于组件的方法,有助于构建可重用的 UI 组件
- 它用于开发复杂的交互式的 web 和移动 UI
React 有什么特点?
- 声明式编码,组件化编码
- 使用虚拟 DOM 而不是真正的 DOM
- 它可以用服务器渲染
- 它遵循单向数据流或数据绑定
- 高效(优秀的Diffing算法、使用虚拟 DOM 而不是真正的 DOM)
React 的一些主要优点?
- 它提高了应用的性能(优秀的Diffing算法、使用虚拟 DOM 而不是真正的 DOM)
- 可以方便在客户端和服务器端使用
- 由于使用 JSX,代码的可读性更好
- 使用React,编写 UI 测试用例变得非常容易
Hello React
首先需要引入几个 react 包,我直接用的是老师下载好的,核心库必须在扩展库前面引入!
- React 核心库、操作 DOM 的 react 扩展库、将 jsx 转为 js 的 babel 库
1 | <!-- 准备好一个“容器” --> |
然后在<script type="text/babel" ></script>
里创建虚拟DOM
1 | //1.创建虚拟DOM |
如果我创建两个虚拟DOM,渲染两次(注意⚠️)
1 | // 1.创建虚拟DOM |
由于渲染不是一个叠加操作,而是覆盖操作,页面只会渲染生成hello,milo的DOM操作!
虚拟 DOM 和真实 DOM 的两种创建方法
为什么不用js而使用jsx?
- JS创建虚拟DOM太繁琐了,JSX更方便
JS 创建虚拟 DOM
1 | //1.创建虚拟DOM,创建嵌套格式的dom |
Jsx 创建虚拟DOM
1 | //1.创建虚拟DOM |
js 的写法并不是常用的,常用jsx来写,毕竟JSX更符合书写的习惯
虚拟DOM与真实DOM
关于虚拟DOM:
本质是Object类型的对象(一般对象)
虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
1 | console.log('虚拟DOM',VDOM); //[Object Object] |
1 | const TDOM = document.getElementById('demo') |
jsx 语法
jsx语法规则
定义虚拟DOM,不能使用
“”
标签中混入JS表达式的时候使用
{}
,toLowerCase()方法可转化成小写
1 | // 1.创建虚拟DOM |
样式的类名指定不能使用class,使用
className
内敛样式要使用
{{}}
包裹,fontSize这种属性要写小驼峰
1 | style={{color:'skyblue',fontSize:'24px'}} |
不能有多个根标签,只能有一个根标签
标签必须闭合,自闭合也行
1 | <input type="text"/> |
如果小写字母开头,就将标签转化为 html 同名元素,如果 html 中无该标签对应的元素,就报错
如果是大写字母开头,react 就去渲染对应的组件,如果没有就报错
记几个
注释
写在花括号里
1 | ReactDOM.render( |
数组
JSX 允许在模板中插入数组,数组自动展开全部成员
1 | var arr = [ |
JSX 小练习
根据动态数据生成 li
1 | const data = ['A','B','C'] |
一定注意⚠️区分:【js语句(代码)】与【js表达式】
表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:
a
a+b
demo(1)
arr.map()
function test () {}
语句(代码):
下面这些都是语句(代码):
if(){}
for(){}
switch(){case:xxxx}