1 setState 涉及的底层原理
1 简单描述: 每次调用 this.setState()方法, 都会触发 diff运算
2 diff 运算:
1 概念: 通常用于提高, 新旧虚拟DOM, 比较和替换效率的, 一种算法
2 做了哪些事:
1 计算出 DOM中真正变化的部分, 只针对该部分做原生 DOM操作, 而非重新渲染整个页面
2 diff 运算只会对脏节点进行操作, 而不会影响其他节点
3 脏节点: 就是 DOM中发生变化的那个节点
2 高阶组件
1 简单描述:
--------------------------------------------------------------------------
1 名称说明:
1 高阶组件 == 高阶函数 == 容器组件
2 被高阶组件修饰的组件 == UI组件
3 官方描述: 是 React用于复用组件逻辑的一种高级技巧
2 作用说明
1 业务逻辑复用的高级技巧, 可让某一个组件, 通过高阶函数内部修饰, 实现功能扩展
2 高阶组件是非必须使用的, 宏观作用就是, 减少代码量, 让代码变得优雅简洁, 方便管理
3 理解
1 是基于React组件的组合特性而来一种设计模式
2 高阶组件就是一个函数, 接收组件, 基于这个类做一些扩展, return 一个新的组件出去
3 这个新的组件就包含了, 高阶函数内部的方法以及数据, 以及接收进来的组件实例
4 并且高阶函数内的新组件会向, 接收进来的组件实例, 以父子通信的方式传递需要的数据
5 也可以把高阶组件理解为一个工厂, 统一加工一些, 需要扩展某些相同功能的组件类
4 使用场景
1 若有 9个组件需要同一个接口数据, 可以把数据请求放在高阶函数内, 去帮需要的组件扩展
2 某些视图结构 (HTML结构), 需要被多个组件视图复用的情况
3 某些业务逻辑, 功能方法等, 需要在多个组件中复用的情况
3 注意
1 当一个UI组件同时被多个容器组件(高阶函数)修饰时, 发现 props有丢失的情况, 处理方案
1 以后写代码, 若需要被多个高阶组件修饰, 习惯性加这个展开运算符
2 高阶函数中, UI组件实例的位置: <A1 {
...this.props} />
2 class 类组件的装饰器语法, 知道就行了, 花里胡哨的不好用 --> @xx calss ...
----------------------------------------------------------------------------
2 高阶组件的 定义 + 使用 --> 代码范式
----------------------------------------------------------------------------
1 定义高阶函数 Test()
import React from 'react'
function Test(A1) {
return class extends React.Component {
constructor(props) {
super(props)
this.state = {
list: []
}
}
componentDidMount() {
const arr = [
{
id: 1, label: 'hehe1'},
{
id: 2, label: 'hehe2'},
{
id: 3, label: 'hehe3'}
]
this.setState({
list: arr})
}
render() {
return() {
<div> <A1 {
...this.props} hh="hehe" arrs={
list}/> </div>}}
}
}
export default Test
2 UI组件使用高阶函数 Test()的过程
import React from 'react'
import Test from '@/hoc/Test'
const A1 = props=> {
console.log(this.props)}
export default Test(A1)
----------------------------------------------------------------------------
3 组合
### 有时间搞
1 组合在react中，是一种非常强大的组件复用的设计模式
2 本质上解决的是组件之间传值的问题, 它对于传值以及一些内部操控的逻辑封装得更严密
3 这种模式比较好的把复杂逻辑完全封装起来了, 比较适合开发组件的开发者
4 针对props的扩展性也比较好，对于使用组件的开发者来说，也比较友好
4 上下文
### 有时间搞
1 作用
1 Context 通过组件树提供了一个传递数据的方法, React.createContext()创建上下文
2 可以在 React组件树中进行数据传递, 避免使用复杂的链式的 props
3 上下文数据只能单向传递，从父组件向内部组件传递，不能倒着来