单向数据流示意图

image.png

reducer

通常是以函数形式存在，接收state（应用局部状态）和action对象两个参数，根据action.type(action类型)执行不同的任务，返回一个新的state，遵循函数式编程思想；

store

state容器,用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

component

dispatch action，数据更新请求

action

视图层发出消息（比如mouseClick）
以对象数据格式存在，通常至少有type和payload属性，它是对redux中定义的任务的描述；

Dispatcher（派发器）

用来接收Actions、执行回调函数,要求 Store 进行相应的更新
store提供的分发action的功能方法，传递一个action对象参数；

createStore

创建store的方法，接收reducer，初始应用状态，redux中间件和增强器，初始化store，开始监听action；

中间件（Redux Middleware）

Redux中间件，和Node中间件一样，它可以在action分发至任务处理reducer之前做一些额外工作，dispatch发布的action将依次传递给所有中间件，最终到达reducer，所以我们使用中间件可以拓展诸如记录日志，添加监控，切换路由等功能，所以中间件本质上只是拓展了store.dispatch方法。

image.png

jsx

• jsx是一门独立的语言，类似typescript。
• jsx创建的是vdom（虚拟dom，内部名称为node）节点，经过react的render函数渲染成为真正的dom。

虚拟dom

react操作的是vdom，vdom是个json，操作json速度快，提升性能。
跟踪vdom变化，伺机调整真实dom，需要给vdom加一个key作为标识。
单个插入元素，react自动添加key，插入元素数组，则需要手动添加key。
key尽量不要用数组的下标/索引。

组件划分

• 布局组件：仅仅涉及应用UI界面结构的组件，不涉及任何业务逻辑，数据请求及操作；
• 容器组件：负责获取数据，处理业务逻辑，通常在render()函数内返回展示型组件；
• 展示型组件：负责应用的界面UI展示；
• UI组件：指抽象出的可重用的UI独立组件，通常是无状态组件；

-	展示型组件	容器组件
目标	UI展示 (HTML结构和样式)	业务逻辑（获取数据，更新状态）
感知Redux	无	有
数据来源	props	订阅Redux store
变更数据	调用props传递的回调函数	Dispatch Redux actions
可重用	独立性强	业务耦合度高

空闲期（Idle Period）

通常，客户端线程执行任务时会以帧的形式划分，大部分设备控制在30-60帧是不会影响用户体验；在两个执行帧之间，主线程通常会有一小段空闲时间，requestIdleCallback可以在这个空闲期（Idle Period）调用空闲期回调（Idle Callback），执行一些任务。

image.png

Fiber与requestIdleCallback

Fiber所做的就是需要分解渲染任务，然后根据优先级使用API调度，异步执行指定任务：

• 低优先级任务由requestIdleCallback处理；
• 高优先级任务，如动画相关的由requestAnimationFrame处理；
• requestIdleCallback可以在多个空闲期调用空闲期回调，执行任务；
• requestIdleCallback方法提供deadline，即任务执行限制时间，以切分任务，避免长时间执行，阻塞UI渲染而导致掉帧；