这是我参加前端训练营笔记活动的第9天。

React基础与实践

React特性与简介

React是用于构建用户界面的JavaScript库。

React特点

声明式、组件化、跨平台编写

Thinking in React

React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一，它在Facebook和Instagram上表现优秀。等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

等待资源加载

一次请求太多资源？网络请求慢？资源加载失败？
React.Lazy，React.Suspense，ErrorBoundary

浏览器线程执行

JS执行、浏览器计算样式布局、UI绘制
异步更新，时间切片，React Fiber

更新流程

Scheduler（调度器）

维护时间切片、与浏览器任务调度、优先级调度

Reconciler（协调器）

将JSX转化成Fiber、Fiber树对比（双缓存）、确定本次更新的Fiber

Renderer（渲染器）

渲染器用于管理一棵React树，使其根据底层平台进行不同的调用

优缺点

优点

快速响应：Fiber
组件化：复用性强
声明式编程
跨平台：只需修改渲染器

缺点

大型应用需要配套学习状态管理、路由工具
不适合小型应用，需要用babel处理

温故知新

用React开发web应用

架构

打包配置：JSX→babel→JS
加载优化和错误降级

路由

React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步

UI

可复用UI→组件→页面
可复用逻辑抽离成hook

状态

多页面多组件共享信息
redux&context

用React开发web应用·组件

数据

通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的的值，unMount前清空Ref

通信

props父子组件通信
context&redux组件信息共享

UI

数据决定视图，通过Ref获取到DOM

性能

函数使用useCallback
值或计算使用useDemo
组件包裹memo