React全家桶
React全家桶(技术栈)
英文官网:https://reactjs.org
一、简介
1.介绍描述
① 用于动态构建用户界面的 JavaScript 库(只关注于视图)
②由Facebook开源
2.特点
- 声明式编码
- 组件化编码
- React Native 编写原生应用
- 高效(优秀的Diffing算法)
3.高效原因
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM
DOM Diffing算法, 最小化页面重绘
二、基本使用
1 | <body> |
1.创建虚拟DOM的两种方式
==①==
1 | const VDOM = ( |
②(不推荐)
-----------------------React.createElement(标签名,{标签属性},标签体内容)
1 | const VDOM = React.createElement('h1',{id:'title'},'Hello,React') |
2.虚拟DOM与真实DOM
- 虚拟DOM的本质就是Object类型的一般对象。
- 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是给react用的,无需那么多的属性。
- 我们编码时基本只需要操作react的虚拟DOM相关数据,虚拟DOM对象最终都会被React转换为真实的DOM。
3.jsx的语法规则
-
**<span style='color:red'>创建虚拟DOM时,不要用引号</span>。**
-
**标签中想混入js表达式,需要用<span style='color:red'> {}</span>包裹。**
-
**<span style='color:red'>根标签</span>必须只有<span style='color:red'>一个</span>**
-
**标签必须<span style='color:red'>闭合</span>**
-
**<span style='color:red'>样式的类名</span>,不要用class,必须用<span style='color:red'>className</span>**
-
**<span style='color:red'>内联的样式</span>要用 <span style='color:red'>style={{}}</span>形式去写**
-
**标签可以随意的编写:**
(1).若标签首字母是【小写】的,则react会尝试将当前的jsx标签对应成一个html标签
若对应成了,直接渲染,展示。
若无法对应,直接报错!
(2).若标签首字母是【大写】的,则react会查找Haha组件的定义的位置
若找见了,直接渲染Haha组件
若未找见,报错(Haha is not defined)
4.区分js语句与js表达式
①表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
②语句(代码):下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
备注:
==①数组(Array).map( )方法==:
用来生成 / 创建一个新数组。
其结果是 该数组中的每个元素 调用一次提供的函数后的返回值。
map 不修改原数组本身
所以map方法必须有返回值,如果没有return,那么新数组的每一项都为undefined,数组的个数与原数组一样
②react可以自动遍历数组,但是不可以遍历对象
三、模块与组件、模块化与组件化
1.模块与模块化
-
理解:向外提供特定功能的js程序, 一般就是一个js文件
-
为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
-
作用:复用js, 简化js的编写, 提高js运行效率
==当应用的js都以模块来编写的, 这个应用就是一个模块化的应用==
2.组件与组件化
-
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
-
为什么要用组件: 一个界面的功能更复杂
-
作用:复用编码, 简化项目编码, 提高运行效率
==当应用是以多组件的方式实现, 这个应用就是一个组件化的应用==
3.组件
①函数式组件
1 | <script type="text/babel"> |
②类式组件
1 | <script type="text/babel"> |
4.组件实例的三大核心属性
①state:
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
state(状态机)通过更新组件的state来更新对应的页面显示(重新渲染组件)。
基本使用
1 | <script type="text/babel"> |
==简写模式==
1 | <script type="text/babel"> |
注意:
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined,如何解决?
a)强制绑定this: 通过函数对象的bind()
b)箭头函数:通过箭头函数的this由外层作用域的this决定这一特性
状态数据,不能直接修改或更新 需要通过setState({})
②props:
每个组件对象都会有props(properties的简写)属性,值是对象(包括函数式组件)
组件标签的所有属性都保存在props中
==通过标签属性从组件外向组件内传递变化的数据==
基本使用
1 | <script type="text/babel"> |
对props中的属性值进行类型限制和必要性限制:
1 | //引入prop-types,用于制定对props限制的具体规则 |
函数组件的props属性(了解)
1 | <script type="text/babel"> |
备注:
①script type=“text/babel” 经过==babel==编译的 开启严格模式 ==普通函数内部的this指向由window变为undefined==
② ES6==类(class)==中所有方法自动开启了严格模式 ==普通函数内部的this指向由window变为undefined==
③扩展运算符(…)无法展开一个对象,但可以通过 const newObject ={…object} 进行对象复制