# 一、React18 基础
# 1、邂逅 React
- 声明式编程
- 组件化开发
- 多平台适配
RN、RVR
# 2、React 安装和依赖
开发 React 必须依赖三个库：
- react：包含 react 所必须的核心代码
- react-dom：react 渲染在不同平台所需要的核心代码
- babel：将 jsx 转换成 react 相关代码的工具
# 3、JSX
在 react 里面绑定变量统一使用 {}
# 3.1、认识 JSX 语法
- JSX 是一种 JavaScript 的语法扩展（eXetension），也在很多地方称之为 JavaScript XML，因为看起来就是一段 XML 语法
- 它用于描述我们的 UI 界面，并且完全可以和 JavaScript 一起使用
- 它不同于 Vue 的模板语法，你不需要专门学习模板语法中的一些指令（如：v-for、v-if、v-else、v-bind）
所以多写 react 的话 js 功底一定会提升的
为什么 React 选择了 JSX？
React 认为渲染逻辑本质上与其他 UI 逻辑存在
内在耦合
- 比如 UI 需要绑定事件（button、a 原生等等）
- 比如 UI 中需要展示数据状态
- 比如在某些状态发生改变时，又需要改变 UI
JSX 的书写规范：
- JSX 顶层只能有一个根元素，所以我们很多时候会在外层包裹一个 div 元素（或者使用后面我们学习的 Fragment）
- 为了方便阅读，我们通常在 JSX 的外层包裹一个小括号 ()，这样可以方便阅读，并且 JSX 可以换行书写
- JSX 的标签可以是单标签也可以是双标签
# 3.2、JSX 的基本使用
# 1. JSX 注释的写法
{/* 我是注释 */} |
# 2. JSX 插入内容
插入变量作为子元素：
- 情况一：当变量是
Number、String、Array 时，可以直接显示 - 情况二：当变量是
null、undefined、Boolean时，内容为空- 如果希望可以显示，那么需要转换成字符串
- 转换的方式很多，比如 toString 方法、和空字符串拼接、String (变量)
- 情况三：
Object对象类型不能作为子元素。（绑定属性值时可以）
插入表达式：
- 运算表达式
- 三元运算符
- 执行一个函数
# 3. JSX 绑定属性
return ( | |
<div> | |
<h2 title={title}>我是h2元素</h2> | |
<a href={href}>百度一下</a> | |
{/* 绑定 class 属性，因为关键字冲突最好使用 className */} | |
<h2 className={className}>哈哈哈</h2> | |
{/* 绑定 style 属性：绑定对象类型 */} | |
<h2 style=<!--swig0-->>哈哈哈</h2> | |
</div> | |
) |
# 3.3、JSX 的事件绑定
# 1. this 绑定
this 的四种绑定规则：
- 默认绑定：独立函数执行 foo () 默认绑定在非严格模式下指向 window，在严格模式下是 undefined
- 隐式绑定：被一个对象执行 obj.foo () this 绑定 obj
- 显示绑定：call/apply/bind foo.call ("aaa") this 绑定为 String ("aaa")
- new 绑定：new Foo () 创建一个新对象，并且赋值给 this
<img src="https://gitee.com/eucli312/img/raw/master/1699243916522-2023-11-6.jpg" alt="1699243916522-2023-11-6.jpg" style="zoom:67%;" />
<img src="https://gitee.com/eucli312/img/raw/master/Screenshot_2023-11-06-10-50-05-601_com.baidu.netd-2023-11-6.jpg" alt="Screenshot_2023-11-06-10-50-05-601_com.baidu.netd-2023-11-6.jpg" style="zoom:67%;" />
开发中建议使用第三种 this 绑定方式，即直接传入一个箭头函数。需要传参的时候：
<button onClick={(e) => this.btnClick(e,aaa,bbb)}>按钮</button> |
# 2. 事件绑定案例
class App extends React.Component { | |
constructor() { | |
super() | |
this.state = { | |
movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"], | |
currentIndex: 0 | |
} | |
} | |
itemClick(index) { | |
this.setState({ currentIndex: index }) | |
} | |
render() { | |
const { movies, currentIndex } = this.state | |
return ( | |
<div> | |
<ul> | |
{ | |
movies.map((item, index) => { | |
return ( | |
<li | |
className={ currentIndex === index ? 'active': '' } | |
key={item} | |
onClick={() => this.itemClick(index)} | |
> | |
{item} | |
</li> | |
) | |
}) | |
} | |
</ul> | |
</div> | |
) | |
} | |
} |
# 3.4、JSX 的条件渲染
- 在 vue 中，我们使用指令：v-if、v-show
- 在 React 中，所有条件判断都和普通的 JavaScript 代码一致
常见的条件渲染方式：
方式一：条件判断语句
适合逻辑较多的情况
方式二：三元运算符
适合逻辑比较简单
方式三：与运算符 &&
适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染
return ( | |
<div> | |
{/* 1. 方式一：根据条件给变量赋值不同的内容 */} | |
<div>{showElement}</div> | |
{/* 2. 方式二：三元运算符 */} | |
<div>{ isReady ? <button>开始战斗!</button>: <h3>赶紧准备</h3> }</div> | |
{/* 3. 方式三: && 逻辑与运算 */} | |
{/* 场景：当某一个值，有可能为 undefined 时，使用 & amp;& 进行条件判断 */} | |
<div>{ friend && <div>{friend.name + " " + friend.desc}</div> }</div> | |
</div> | |
) |
# 3.5、JSX 的列表渲染
- 在 React 中，渲染列表最多的方式就是使用数组的
map高阶函数 - key 的主要作用是为了提高 diff 算法的效率
return ( | |
<div> | |
<h2>学生列表数据</h2> | |
<div className="list"> | |
{ | |
students.filter(item => item.score > 100).slice(0, 2).map(item => { | |
return ( | |
<div className="item" key={item.id}> | |
<h2>学号: {item.id}</h2> | |
<h3>姓名: {item.name}</h3> | |
<h1>分数: {item.score}</h1> | |
</div> | |
) | |
}) | |
} | |
</div> | |
</div> | |
) |
# 3.6、JSX 的原理和本质
# 4、React 脚手架解析
# 4.1、认识脚手架工具
# 4.2、cteate-react-app
# 4.3、创建 react 项目
电脑上要有 react 脚手架环境：
npm i create-react-app -g创建项目：
create-react-app 项目名称(p.s. 注意不能有大写字母) 要等好久～运行项目：
yarn start
public/index.html：应用的 index.html 入口文件PWA（
manifest.json、logo192.png、logo512.png等文件）手机（Android）可以将浏览器上的网页保存到桌面
<img src="https://gitee.com/eucli312/img/raw/master/2023-11-6-276.jpgScreenshot_2023-11-06-19-07-45-437_com.baidu.netd.jpg" alt="2023-11-6-276.jpgScreenshot_2023-11-06-19-07-45-437_com.baidu.netd.jpg" style="zoom:80%;" />
robots.txt配置那些可以被爬虫爬
src 下各个文件：
index.js：整个应用程序的入口文件
App.js：从 index.js 抽取出来的组件，为了更加直观。后续自己开发的组件其实也可以直接写在这里面，但为了直观方便维护我们也单独抽取出组件
React.StrictMode: 严格模式
root.render(
<React.StrictMode><App /></React.StrictMode>);
# 4.4、webpack 的配置
react 是已经把 webpack 集成了的，所有目录里直接看不到 webpack 相关的配置
#
# 5、React 组件化开发
# 5.1、React 组件化开发介绍
- 将一个完整的页面分成很多个组件
- 每个组件都用于实现页面的一个功能块
- 而每一个组件又可以进行细分
- 而组件本身又可以在多个地方复用
一般情况下函数组件都是无状态组件；类组件都是有状态组件
# 1. 类组件
render () 的返回值
![2023-11-6-791Screenshot_2023-11-06-21-23-10-051_com.baidu.netd.jpg]()
import React from "react";
// 1. 类组件class App extends React.Component {
constructor() {
super()
this.state = {
message: "App Component"
}}render() {
const { message } = this.state
// 1.react 元素：通过 jsx 编写的代码就会被编译成 React.createElement, 所以返回的就是一个 `React 元素`return <h2>{message}</h2>
// 2. 组件或者 fragments (后续学习)return ["abc", "cba", "nba"]
return [
<h1>h1元素</h1>,
<h2>h2元素</h2>,
<div>哈哈哈</div>
]// 3. 字符串 / 数字类型return "Hello World"
return true
}}export default App;
# 2. 函数组件
// 函数式组件 | |
function App(props) { | |
// 返回值：和类组件中 render 函数返回的是一致，只是不需要 render () 包裹了 | |
return <h1>App Functional Component</h1> | |
} | |
export default App |
# 5.2、React 组件的生命周期
