HduCowHorseFpy
🈚️
前端练习时长一年半练习生
获得徽章 0
#### React公共状态管理方案：React & React-Redux
复合组件通信的两个方案：
+ 基于props属性实现父子组件通信（或具备相同父亲的兄弟组件）
+ 基于context上下文实现祖先喝后代组件之间的通信（或者具备相同祖先的平行组件）
在React中，公告状态管理的解决方案：
+ react + react-redux
+ dva（react-saga）或umi
+ Mobx
+ ...
1.在创建的store容器中，存储两部分内容
+ 公共状态：各组件需要共享/通信的信息
+ 事件池：存放一些方法（让组件可以更新的方法）
特点：当公共状态一旦发生改变，会默认立即通知事件池中的方法执行
这些方法的执行，主要目的是让指定的组件更新：而组件一更新，就可以获取最新的公共状态信息进行渲染
2.修改公共容器中的状态，不能直接去修改
+ 基于dispatch派发，通知reducer去执行
+ 在reducer中实现状态的更新
复合组件通信的两个方案：
+ 基于props属性实现父子组件通信（或具备相同父亲的兄弟组件）
+ 基于context上下文实现祖先喝后代组件之间的通信（或者具备相同祖先的平行组件）
在React中，公告状态管理的解决方案：
+ react + react-redux
+ dva（react-saga）或umi
+ Mobx
+ ...
1.在创建的store容器中，存储两部分内容
+ 公共状态：各组件需要共享/通信的信息
+ 事件池：存放一些方法（让组件可以更新的方法）
特点：当公共状态一旦发生改变，会默认立即通知事件池中的方法执行
这些方法的执行，主要目的是让指定的组件更新：而组件一更新，就可以获取最新的公共状态信息进行渲染
2.修改公共容器中的状态，不能直接去修改
+ 基于dispatch派发，通知reducer去执行
+ 在reducer中实现状态的更新
展开
评论
点赞
import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
ReactDom.render(
<Router>
<div>
<Route exact path='/'>
<Home />
</Route>
<Route path='/news'>
<News />
</Route>
</div>
</Router>
)
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
ReactDom.render(
<Router>
<div>
<Route exact path='/'>
<Home />
</Route>
<Route path='/news'>
<News />
</Route>
</div>
</Router>
)
展开
评论
点赞
##### React-router
+ HasRouter
+ BrowerRouter
+ MemoryRouter
包裹路由：感知URL变化，提供Provider供嵌套children消费
+ Route
路由匹配：页面渲染
+ HasRouter
+ BrowerRouter
+ MemoryRouter
包裹路由：感知URL变化，提供Provider供嵌套children消费
+ Route
路由匹配：页面渲染
展开
评论
点赞
##### React-router
+ HasRouter
+ BrowerRouter
+ MemoryRouter
包裹路由：感知URL变化，提供Provider供嵌套children消费
+ Route
路由匹配：页面渲染
+ HasRouter
+ BrowerRouter
+ MemoryRouter
包裹路由：感知URL变化，提供Provider供嵌套children消费
+ Route
路由匹配：页面渲染
展开
1
3
##### 什么是状态管理
状态管理本身，解决的就是这种潜逃地狱的问题，解决的是跨层级组件之间的数据通信和状态共享
状态管理工具的本质：管理共享内存中的状态
+ 共享内存
+ 管理状态
+ 页面通信
+ 组件通信
+ 刷新失效？
详细定义：单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存中的变量，，从而达到状态共享的目的。
状态管理本身，解决的就是这种潜逃地狱的问题，解决的是跨层级组件之间的数据通信和状态共享
状态管理工具的本质：管理共享内存中的状态
+ 共享内存
+ 管理状态
+ 页面通信
+ 组件通信
+ 刷新失效？
详细定义：单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存中的变量，，从而达到状态共享的目的。
展开
评论
点赞
###### React特点
+ 声明式
+ 组件化
+ 跨平台编写
等待资源加载实践和大部分情况下浏览器单线程执行是影响web浏览器性能的主要原因
+ 声明式
+ 组件化
+ 跨平台编写
等待资源加载实践和大部分情况下浏览器单线程执行是影响web浏览器性能的主要原因
展开
评论
点赞
##### 泛型
基本定义：
+ 泛型的语法是<>里面写类型参数，一般用T表示
+ 泛型的作用是临时站为，之后通过传来的类型进行推导
+ 使用时有两种方法指定类型：
+ 定义要使用的类型
+ 通过TS类型判断，自动推导类型
基本定义：
+ 泛型的语法是<>里面写类型参数，一般用T表示
+ 泛型的作用是临时站为，之后通过传来的类型进行推导
+ 使用时有两种方法指定类型：
+ 定义要使用的类型
+ 通过TS类型判断，自动推导类型
展开
评论
点赞
1、联合类型 |
```tsx
let num: number | string
num = 8
num = 'eight'
```
2、交叉类型 &
```tsx
interface Person {
name: string
age: number
}
type Student = Person & (grade: number)
```
3、类型断言
4、类型别名（type vs interface）
+ 定义：给类型起个别名
+ 差异点
+ interface是TS用来定义对象，type是用来定义别名方便使用
+ type可以定义基本类型，interface不行
+ interface可以合并重复声明，type不行
+ 相同点
+ 都可以定义对象或函数
+ 都允许继承
```tsx
let num: number | string
num = 8
num = 'eight'
```
2、交叉类型 &
```tsx
interface Person {
name: string
age: number
}
type Student = Person & (grade: number)
```
3、类型断言
4、类型别名（type vs interface）
+ 定义：给类型起个别名
+ 差异点
+ interface是TS用来定义对象，type是用来定义别名方便使用
+ type可以定义基本类型，interface不行
+ interface可以合并重复声明，type不行
+ 相同点
+ 都可以定义对象或函数
+ 都允许继承
展开
评论
点赞
###### TypeScipt 基础
+ boolean、number、string
+ 枚举 enum
+ any、unknown、void
+ never
+ 数组类型 [ ]
+ 元组类型 tuple
函数类型
定义：TS定义函数类型时要定义输入参数类型和输出参数类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型
+ boolean、number、string
+ 枚举 enum
+ any、unknown、void
+ never
+ 数组类型 [ ]
+ 元组类型 tuple
函数类型
定义：TS定义函数类型时要定义输入参数类型和输出参数类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型
展开
评论
点赞
3、变量提升
+ var 定义 有变量提升 在定义之前使用 会默认 var 变量 = undefined
+ let const 没有变量提升，提前访问会报错
+ function 函数可以先调用后定义
+ 赋值给变量的函数无法提前调用，因为默认var func = undefined
+ var 定义 有变量提升 在定义之前使用 会默认 var 变量 = undefined
+ let const 没有变量提升，提前访问会报错
+ function 函数可以先调用后定义
+ 赋值给变量的函数无法提前调用，因为默认var func = undefined
展开
评论
点赞
###### JS的基本概念
1、数据类型
+ 对象：数组、函数
+ 基本类型：字符串、undefined、数字、null、symbol、bigInt、布尔
2、作用域：变量的可访问性和可见性
静态作用域：通过它就能够预测代码在执行过程中如何查找标识符
1、数据类型
+ 对象：数组、函数
+ 基本类型：字符串、undefined、数字、null、symbol、bigInt、布尔
2、作用域：变量的可访问性和可见性
静态作用域：通过它就能够预测代码在执行过程中如何查找标识符
展开
评论
点赞