Reactday01
React 01.基础语法
一、课程大纲
1、React概述
2、React快速入门
- 入门应用
- 核心
API：底层运行原理
3、React JSX基础语法
4、React组件化开发
二、课程内容
1、React概述
官方文档：https://reactjs.org
官方中文文档：https://zh-hans.reactjs.org
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pmf8A0Ae-1657070007369)(assets/image-20220704090932555.png)]
官方文档网站：https://zh-hans.reactjs.org/docs/getting-started.html
- 后期大量和
React开发相关的技术点，都集中在开发文档和API文档中
（1） 什么是React
React 是一个用于构建用户界面的 JavaScript 库
React框架本身是Facebook内部项目，于2013年5月开源，2015年前后引入国内开始称为了前端项目的主要开发和构建工具之一！
（2） 为什么使用React
快捷、高效开发和构建成熟的前端应用！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
（3） Vue VS React
前端框架的技术选型，选择Vue？选择React？
- 符合公司/企业的项目开发规范，使用当前公司的主要技术栈
React相对更加庞大、更加成熟、更加稳定，一般大型项目的技术选型优先考虑Vue相对更加轻量级，开发效率更加迅速，技术迭代更加快，一般中小型项目优先考虑
2、快速入门
React学习期间，首先了解开发方式，包含了那些核心库？使用什么样的语法？底层工作原理？
（1） 下载、安装、引入
版本问题
目前市场上主流的开发版本主要包含三个版本：
16.x：目前主流开发版本17.x：过度版本，大量公司中已经有了使用案例，相对技术比较成熟，可以当成主流版本使用18.x：最新版本，少量公司内部项目中已经开始使用
文件库的引入：
React针对开发环境的不同，提供了两种不同的引入文件：
- 生产环境：
xxxx.production.js- 开发环境：
xxxx.developer.js
引入：
①
CDN：网络文件分发服务器（分担当前开发服务器的访问压力），引入需要的依赖
- 注意：如果要引入不同的版本，请更新
@18版本号即可- 注意：
crossorigin主要是针对cdn引入方式，更好的访问文件而添加的跨域属性<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>② 本地引入，从
CDN服务器下载依赖文件<script src="./react.development.js"></script> <script src="./react-dom.development.js"></script>③
npm引入，结合Node项目环境，通过npm下载安装和引入npm install react@17 react-dom@17 -S
（2） 快速入门应用
① @17：掌握
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./react.development.js">script>
<script src="./react-dom.development.js">script>
<script>
// 编写React代码
// 创建一个标签对象
let h1 = React.createElement('h1', {id: 'title'}, 'hello react!')
// 挂载并渲染节点内容
const app = document.querySelector("#app")
// 渲染
ReactDOM.render(h1, app)
script>
body>
html>
② @18：了解
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./react18.development.js">script>
<script src="./react-dom18.development.js">script>
<script>
// 创建一个新的节点
let h1 = React.createElement('h1', {id: 'main'}, '你好React!')
// 创建根组件对象
const app = document.querySelector("#app")
const root = ReactDOM.createRoot(app)
// 渲染
root.render(h1)
script>
body>
html>
（3） 核心API
React作为一个重量级框架，将自己的核心库拆分成两部分
React.development.js：核心操作库ReactDOM.development.js：DOM操作库
底层工作过程中，主要提供了两个API函数：
React.createElement(tagName, attribute, ...child)- 函数描述：创建节点
tagName：创建的节点字符串名称attribute：创建节点的 属性:值 对象...child：创建的节点内部包含的子节点
ReactDOM.render(elemenet, root)- 函数描述：渲染数据
element：要渲染的节点数据root：将数据渲染到页面中的那个节点上，也称为挂载节点
代码操作：
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="./react.development.js">script>
<script src="./react-dom.development.js">script>
<script>
let small = React.createElement('small', {id: 'author'}, '作者：李白')
let h1 = React.createElement('h1', {id: 'title'}, '静夜思', small)
let p1 = React.createElement('p', {}, '床前明月光，疑是地上霜')
let p2 = React.createElement('p', {}, '举头望明月，低头思故乡')
let div = React.createElement('div', {}, h1, p1, p2)
const app = document.querySelector("#app")
ReactDOM.render(div, app)
script>
body>
html>
页面展示效果：
3、JSX语法
（1） 什么是JSX
JSX是一种JavaScript模板语法，开始主要是为了React页面模板提供的一种结构化编译语言；后来形成了独立的语法基础，在很多框架都可以被引入和使用
如果项目中需要使用JSX语法，需要页面添加babel的支持，用于将JSX语法编译成普通JS代码运行
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="./babel.min.js">script>
（2） JSX语法
了解并使用JSX基础语法
Document
（3） 插值表达式
插值表达式，主要用于在模板页面中输出变量数据
Document
（4） 属性绑定
标签的属性可以通过变量进行动态的控制
Document
（5） 样式处理
标签的样式，主要通过class关联外联样式或者通过style处理行内样式
Document
（6） 注释
JSX语法中，注释使用的依然是JavaScript注释
（7）条件渲染
JSX中更多的条件渲染，主要是配合插值表达式和三元运算符实现的
Document
（8）列表渲染
可以通过原生JS的循环语句，直接完成数组数据的循环渲染：列表渲染
Document
（9）富文本渲染-了解
网页开发工程中，富文本的添加和渲染展示，一般都使用第三方模块实现，如Ueditor、editor.md、qullijs markdown，React JSX语法中本身也支持富文本的渲染，但是需要注意XSS攻击
Document
（10） 开发插件
VSCode中开发React应用，为了提高开发效率，建议安装辅助插件：
ES7+ React/Redux/React-Native snippets
4、组件化开发
（1） 什么是组件化
组件化components，将视图页面中一些公共的部分抽取封装成组件，实现组件的复用达到高效开发项目的目的；React组件化开发主要包含两种
- 函数式组件：目前中大型公司已经开始使用，函数式开发的灵活性更加强大，对于项目的功能扩展和项目的功能升级有很大的好处
- 类组件：目前市场主流开发方式，主要集中在中小型公司，类组件本身面向对象的开发方式让组件的功能更加的全面，对项目的支持更加友好
思考：什么是组件化？什么是 模块化？
（2） 组件的声明和使用
① 函数式组件的声明
Document
② 类组件
Document
（3） 组件的状态数据
React中的组件，函数式组件没有自己的状态数据，直接使用全局变量/函数外部变量中的数据；类组件包含自己的状态数据、生命周期等各种内建功能管理；前期的学习重点以类组件为主
Document
（4） 事件操作
组件的出现是为了视图的复用，视图中会出现大量的事件操作，组件中按照如下语法进行处理：
① 基本事件绑定语法
class Home extends React.Component {
render() {
return
}
hander() {
console.log("事件被触发了....")
}
}
② 获取事件对象
class Home extends React.Component {
render() {
return
}
hander(e) {
console.log("事件对象：", e)
}
handler2(e, name){
console.log("事件对象：", e, "自定义参数:"， name)
}
}
③ this指向
class Home extends React.Component {
render() {
return
}
hander() {
console.log("this指向：", this)
}
}
（5） 状态数据更新
React中支持的数据操作方式：单向数据流；如果某种场景中需要数据更新，可以主动调用组件提供的内建更新函数：setState({})
this.setState({})：直接刷新页面数据this.setState({key: value})：更新数据并刷新页面
代码操作：
Document
5、综合案例：
品牌管理：CRUD
6、面试题解析
（1） 消失的变量
观察下面的代码，描述数据的输出结果
console.log(msg) // ①
var msg = "hello"
console.log(msg) // ②
console.log(title) // ③
let title = "world"
console.log(title) // ④
1、请描述输出的结果：
①
undefined②
hello③ 报错
④ 不会执行
2、请描述出现上述结果的原因？
① ②：原生
js中使用var声明的变量存在预解析，变量未声明时直接使用会得到数据:undefined，但是代码不会报错；数据一旦声明，变量中数据的输出就会正常输出存储的数据③ ④：
ES6语法中使用let关键词声明变量，不存在预解析；一旦某个变量没有声明直接使用就会直接报错，提示出现了未定义的变量数据3、什么是预解析？
预解析，原生
js中的一种容错机制，可以在某个对象没有声明的情况下使用，保障程序代码不会出现崩溃错误的一种容错机制，将声明的部分提前，保障该变量可以正常使用；存在一些问题，很容易导致变量全局污染，所以开发中推荐使用let声明变量
（2） 消失的函数
观察下面的代码，请描述会出现什么样的运行结果？
console.log(fn()) // 1
function fn() {
return "hello fn!"
}
console.log(fn()) // 2
console.log(fn2()) // 3
const fn2 = () => {
return "hello fn2!"
}
console.log(fn2()) // 4
1、请描述上述代码会输出什么结果？
①
hello fn!②
hello fn!③ 出现错误
④ 不会执行，前面的代码执行出现问题，导致后续代码不再解释执行
2、解释上述运行结果的原因？
① ② ：普通函数的声明，在当前作用域中存在预解析
③ ④：箭头函数的声明，当前作用域中没有预解析，相当于声明了函数赋值给变量
3、什么是预解析？箭头 函数和普通函数的区别？
预解析，普通函数的声明，在当前作用域中会将函数声明提升到代码最前端，保障当前作用域中该函数的可用性；
箭头函数和普通函数相比较，没有作用域预解析功能，内部的
this指向上下文环境
（3） 迟来的数字
观察下面的代码，请描述可能输出什么结果？
for (var i = 0; i < 10; i ++) {
setTimeout(function() {
console.log(i) // 1
})
}
for(let j = 0; j < 10; j++) {
setTimeout(function() {
console.log(j) // 2
})
}
1、请描述上述代码的输出结果：
- ① 连续输出10次
10- ② 输出：
0,1,2,3,4,5,6,7,8,92、请描述上述代码执行结果的原因？
var声明的变量，只有全局和局部之分；let关键词存在块级作用域