建议预备知识:HTML+CSS+JS基础、webpack、ajax、Promise、axios知识
React系统学习笔记
PartⅠ:React入门
1 React简介
- 用于动态构建用户界面的JavaScript(只关注视图)
- 由Facebook开源
1.1 React的特点
- 声明式编程
- 组件化编程
- React Native编写原生应用
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物
- 高效 (优秀的Diffing算法)
1.2 React高效的原因
- 使用虚拟(virtual)DOM,不总是直接操作页面真实DON
- DOM Diffing算法,最小化页面重绘
注意:React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效
减少渲染次数
2 react基本使用
2.1 效果
2.2 相关库
- react.js:React核心库
- react-dom.js:提供操作DOM的react扩展库
- babel.min.js:解析JSX语法代码转为JS代码的库
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<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"> /* 第一个注意点:此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
//2.渲染虚拟DOM到页面,参数1是虚拟DOM,参数2是容器
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
几个注意点:
- 记得准备好容器
- 核心库必须在扩展库之前引入
type="text/babel"
记得写babel
浏览器才知道你写jsx
- 注意创建虚拟dom的时候不写单引号
- 创建的多个虚拟节点同时往一个容器里面放,会发生覆盖,也就是说以最后放的一个为主
3 创建虚拟DOM的两种方式
3.1 js创建虚拟DOM(不推荐
)
用js不需要引入babel文件了,其他的两个照常
//1.创建虚拟DOM,创建嵌套格式的doms--繁琐
const VDOM=React.createElement('h1',{
id:'title'},React.createElement('span',{
},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,docoment.getElementById('test'))
3.2 jsx创建虚拟DOM
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面,参数1是虚拟DOM,参数2是容器
ReactDOM.render(VDOM,document.getElementById('test'))
当出现多重嵌套时,js创建方法写起来相当麻烦:
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
JSX的意义:创建虚拟DOm更加方便
JSX创建虚拟DOM是JS的语法糖,当我们写完JSX代码后,最终我们的代码也会被编译成JS的书写方式
3.3 关于虚拟DOM
- 本质时Object类型的对象(一般对象)
- 虚拟DOM比较’轻’,真实DOM比较’重’,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性)
- 虚拟DOM最终会被React转化为真实DOM,呈现在页面上
4 jsx语法规则
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此
应该说JSX因React框架而流行,但也存在其他的实现。只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)
4.1 规则
- 定义虚拟DOM时,不要写引号
- 标签中混入JS表达式时要用{},注意是表达式(也就是值)
- 样式的类名指定不要用class,要用className
- 内联样式,要用style={ {key:‘value’}}的形式去写,第一个{}代表你要写JS表达式了,第一个{}表示你写的是一个对象,多个单词类似fontSize的写小驼峰形式
- 只有一个跟标签(整个虚拟DOM在外层有且仅有一个容器包裹)
- 标签必须闭合
- 标签首字母
若小写字母开头
,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错
若大写字母开头
,react就去渲染对应组件,若组件没有定义,则报错
<script type="text/babel">
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={
myId.toLowerCase()}>
<span style={
{
color: 'white', fontSize: '29px' }}>{
myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={
myId.toUpperCase()}>
<span style={
{
color: 'white', fontSize: '29px' }}>{
myData.toLowerCase()}</span>
</h2>
<input type="text" />
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
4.2 区分【js语句(代码)】与【js表达式】
表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
- a
- a+b
- demo(1)
- arr.map()
- function test(){}
语句:不能放在创建虚拟dom语句中
-
if(){}
-
for(){}
-
switch(){}
5 组件与模块理解
5.1 模块与模块化
模块
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
- 作用:复用js,简化js的编写,提高js运行效率
模块化
当应用的js都以模块来编写,这个应用就是一个模块化的应用
5.2 组件与组件化
组件
-
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)
-
为什么要用组件:一个界面的功能复杂
-
作用:复用编码,简化项目编码,提高运行效率
组件化
当应用是以多组件的方式实现,这个应用就是组件化的应用