React 基础与实践|青训营笔记

53 阅读2分钟

一、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,也进行了比较。可以纵向比较学习,更透彻清晰。