react特性
jsx语法 xml和JS混合写在一起的格式
组件式开发
虚拟DOM提升更新修改dom元素的效率
单向数据绑定
常见的组件声明方式 函数式组件和类组件
函数组件 返回内容为渲染的内容
类组件 必须写render函数中返回需要渲染的内容
函数组件 useState()组件去管理状态
类组件 在类中定义state
useEffect
用途：模拟声明周期，处理一些状态变化的副作用，请求接口
为什么：
1保证函数式组件的核心原则：函数式组件应为纯函数，即相同输入可以产生相同的输出，直接在函数组件中去请求API产生不可预测性
useEffect中去调用API将副作用和渲染逻辑分离开，确保副作用在渲染结束后执行
2控制副作用执行的时机，避免不必要执行，如果把作用写在组件内，组件的每次渲染都会触发副作用，使用useEffect的依赖项数组控制时机
3避免阻塞渲染，useEffect中代码异步执行 不会阻塞渲染
4处理清理逻辑 在useEffect副作用会return 一个函数清理之前定义的定时器等变量
useRef 组件的生命周期中维护一个变量，绑定特定的一个dom元素
useContext 构建一个全局的上下文
生命周期
初始化阶段
constructor函数初始化state一些参数防抖节流的绑定
getDerivedStateFromProps 静态函数 传入props和State合成一个新的state
componentWillMount 接口需要预请求
componentDidMount
更新阶段
componentWillReceiveProps
props发生变化会执行
shouldComponentUpdate 拦截器 决定组件要不要更新
componentWillUpdate
getSnapShotBeforeUpdate 更新前的快照
componentDidUpdate 更新
销毁阶段
闭包定时器时间管理销毁
componentWillunmout
hooks
只能在外层函数中调用
在和react相关的函数中调用 组件 自定义hooks
为什么会有
1.组件之间复用状态逻辑困难 useState
2.类组件生命周期等问题useEffect
3.解决this复杂问题·
Fiber 17版本后引入的数据结构
本质为了使之前的stack reconciler 变为fiber reconciler
const FiberNode ={
tag 标记什么类型
key
构建复杂链表
}
‘
各版本之间区别
16.8
stack reconciler 更多类写法
17
fiber reconciler 解决递归爆炸的问题1
在17版本时 外部批处理 在setTimeout内使用 同步更新 的
useEffect 异步调用 等主线程dom更新 JS执行完成 视图绘制完成后执行
useLayout时机是在dom更新之后，视图绘制完成之前这个时候可以更方便地修改dom元素
useInsertionEffect 时机更早 dom 更新前
HOC 高阶组件
逻辑复用
useRouter API如何使用useRouter进行动态路由加载
把router整体做一个配置
说说 stack reconciler 和 Fiber reconciler区别
遍历DOM树 递归遍历树本质上都是递归遍历
return child sibling 之间存在关系构成了不递归的遍历
1.单层遍历 不涉及跨层的对比
2.引入key值去遍历
React几种数据结构 4种类
1element 函数组件返回值 或者 类组件render函数的返回值
本质是大对象
2current fiber 表示当前数据状态的核心数据结构
3workInProgress fiber 状态更新完成后 切换成 current fiber
真实的DOM
react 的调和过程就是current fiber 虚拟dom 对比 生成 workinprogress fiber 的过程
React 更新流程
三个部分 beginwork complerework commitwork 略
闭包陷阱
两种 useState 闭包
useEffect闭包
定义：通过闭包获取到外部变量的值得，获取到旧的值
成因：1.回调函数或者setTimeOut()异步执行
2.useEffect
解法：
1.合理设置 依赖项
2.useRef() 在组件的整个生命周期都生效的变量
3.函数式更新
