一、React入门
B站自学：尚硅谷React教程（2022加更，B站超火react教程）
讲师：天禹男神
开始时间：2022/7/16（第一天）
React全家桶
- React基础
- React-Router（路由管理）
- PubSub（消息管理）
- Redux（集中式状态管理）
- Ant-Resign（UI库）
- ...
1.1 React简介
官网地址：react.docschina.org/
React是什么？？？
官方：用于构建用户界面的JavaScript库
是一个将数据渲染成为HTML视图的开源JavaScript库
谁开发的？
由Facebook开发的，且开源
为什么要学React？
- 原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
- 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。
- 原生JavaScript没有组件化编码方案，代码复用率低。
React的特点
- 采用组件化模式、声明式编码，提高开发效率且组件复用率
- 在React Native中可以使用React语法进行移动端开发
- 使用虚拟DOM+优秀的Diffing算法，减少与真实DOM的交互
1.2 React基本使用
相关的js库
-
babel.min.js
- ES6 ==> ES5
- jsx ==> js
-
prop-types.js
-
react.development.js
- react核心库
-
react-dom.development.js
- react扩展库
导入相关js库文件(react.js, react-dom.js, babel.min.js)
实现react页面效果
<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>
<!-- 此处一定要写babel -->
<script type="text/babel">
// 这里不要加引号，不是字符串
const VDOM = <h1>Hello,React</h1>;
// 渲染DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
1.3JSX的理解和使用
1). 理解
* 全称: JavaScript XML
* react定义的一种类似于XML的JS扩展语法: XML+JS
* 作用: 用来创建react虚拟DOM(元素)对象
2). 编码相关
* js中直接可以套标签, 但标签要套js需要放在{}中
* 在解析显示js数组时, 会自动遍历显示
* 把数据的数组转换为标签的数组:
var liArr = dataArr.map(function(item, index){
return <li key={index}>{item}</li>
})
3). 注意:
* 标签必须有结束
* 标签的class属性必须改为className属性
* 标签的style属性值必须为: {{color:'red', width:12}}
JSX就是一种语法糖，需要用babel来解析成js
jsx语法规则：
1.定义虚拟D0M时，不要写引号。
2.标签中混入JS表达式时要用}。
3.样式的类名指定不要用c1ass,要用className。
4.内联样式，要用sty1e={key:value}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为htm1中同名元素，若htm1中无该标签对应的同名元素，则报错
(2).若大写字母开头，eact就去渲染对应的组件，若组件没有定义，则报错。
1.4 几个重要概念理解
1.4.1虚拟DOM与真实DOM
<!-- 此处一定要写babel -->
<script type="text/babel">
// 这里不要加引号，不是字符串
const VDOM = (
<h1>
<span>Hello,React</span>
</h1>
);
//渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
// 查看虚拟DOM类型
console.log("虚拟DOM", VDOM);
console.log(typeof VDOM);
console.log(VDOM instanceof Object);
const TDOM = document.getElementById("demo");
console.log("真实DOM", TDOM);
debugger;
</script>
关于虚拟DOM：
- 本质是Object类型得对象（一般对象）
- 虚拟DOM比较“轻”，真实DOM比较“重”
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面
1.4.2区分JS语句（代码）和JS表达式
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1).a
(2).a+b
(3).demo(1)
(4).arr.map()
(5).function test ({
2.语句（代码）：
下面这些都是语句（代码）：
(1).if()}
(2).for()}
(3).switch(){case:xxXx}
模块与组件
1. 模块:
理解: 向外提供特定功能的js程序, 一般就是一个js文件
为什么: js代码更多更复杂
作用: 复用js, 简化js的编写, 提高js运行效率
2. 组件:
理解: 用来实现特定功能效果的代码集合(html/css/js)
为什么: 一个界面的功能太复杂了
作用: 复用编码, 简化项目界面编码, 提高运行效率
模块化与组件化
1. 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
2. 组件化:
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
