一、React特性与简介
特点:声明式、组件化、跨平台编写
二、React是用Javascript构建快速响应的大型Web应用程序的首选方式之一。等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
更新流程:
Scheduler(调度器): 维护时间切片(类似requestldleCallback);与浏览器任务调度;优先级调度
Reconciler (协调器):将JSX转化为Fiber;Fiber 树对比(双缓存);确定本次更新的Fiber
Renderer (渲染器):渲染器用于管理一棵React 树,使其根据底层平台进行不同的调用。
三、优缺点
优点:快速响应:Fiber;组件化:复用性强;声明式编程;跨平台:只需修改渲染器。
缺点:大型应用需要配套学习状态管理、路由工具;不适合小型应用,需要用 babel 处理
四、用React开发web应用
架构:打包配置:JSX->bable->JS加载优化和错误降级
路由:React Router向应用中快速地添加视图和数据流,保持页面与URL间的同步。
U1:可复用UI->组件->页面。可复用逻辑抽离成hook。
状态:多页面多组件共享信息redux&context
数据:通过定义 state 操作视图;Mount时获取数据更新state;Ref 保存与视图无直接关系的值;unMount前清空 Ref
通信:props 父子组件通信;contextd &redux 组件信息共享
u1 : 数据决定视图;通过 Ref 获取到DOM
性能: 函数使用 useCallback;值或者计算使用useMemo; 组件包裹memo
五、组件
函数式组件:没有生命周期;借助Hook;return JSX
Class组件:继承+构造函数;this;生命周期;render方法
React知识点多、复杂,而且讲了hook,也进行了比较。可以纵向比较学习,更透彻清晰。