- Published on
react基础知识梳理
- Authors
- Name
- noodles
- 每个人的花期不同，不必在乎别人比你提前拥有
受控组件/非受控组件
- 受控组件依赖于state,通过onChange => state => value 适合频繁数据处理表单逻辑场景(校验)
- 非受控组件不依赖于state,通过操作dom更新和获取值 适合简单提交表单场景
单页应用/多页应用
| 对比 | 单页应用 | 多页应用 |
|---|---|---|
| 优点 | 页面切换快,当前页面刷新 | 利于SEO |
| 缺点 | 不利于SEO,需要做服务端路径处理和应用内前进后退逻辑 | 切页需要重新加载资源,有卡顿空白的问题 |
前端架构模型(MVC/MVP/MVVM)
MVC
客户端MVC
- 用户操作视图后,调用Controller接口发起数据更新
- Controller调用Model接口做数据变更,Model发起数据变更通知
- 数据监听数据变更通知,完成页面更新
服务端MVC
- 用户发起页面请求
- 服务端根据路由规则把请求交给特定的Controller处理,Controller完成数据的组合和页面模版渲染
- 服务端将渲染结果返回给客户端,客户端完成页面的渲染
MVP(Model-View-Presenter)
- 用户操作页面,调用Presenter
- Presenter直接调用Model接口更新数据
- Model更新后通过观察者模式通知Presenter
- Presenter接受更新通知后调用View接口更新视图
MVVM(Model-View-ViewModel)
- 用户操作页面,调用ViewModel更新Model
- Model更新触发ViewModel更新
- ViewModel和View有双向绑定,视图自动更新
react diff
react的diff策略基于以下三点:
- DOM节点的跨层级移动操作较少
- 相同类型组件有相同的DOM结构,不同类型的组件有不同的DOM结构
- 对于同一层级的一组子节点,可以通过唯一id进行区分
对于以上三点,有以下的更新策略
- tree diff 对虚拟Dom分层diff,不存在直接删除不考虑移动的复用
- component diff 不同类型组件直接替换,同类型组件可以通过组件的属性变化来判断是否需要更新
- element diff React提供了三种节点操作：插入(INSERT_MARKUP)/移动(MOVE_EXISTING)/删除(REMOVE_NODE)来达到同类型子节点复用的目的(会复用dom节点更新属性)
react渲染模式
- Legacy模式(同步渲染)
- Concurrent模式(异步渲染)
高阶组件/render props
前端路由
react事件系统
react hooks
react渲染过程
前端状态管理
react更新任务调度
setState源码分析
从Scheduler包来看React的任务调度
react server component
How React server components work: an in-depth guide
react思考
参考
react 中 ReactElement 与 Fiber 的关系
How React server components work: an in-depth guide React Fiber不就是个链表么