响应式系统与React|青训营笔记在学习本节内容之前，首先需要掌握HTML、JS和CSS基础，基础的数据结构或算法知识，

这是我参与⌈第四届青训营⌋笔记创作活动的第12天。在学习本节内容之前，首先需要掌握HTML、JS和CSS基础，基础的数据结构或算法知识，会使用浏览器提供的DOM API来修改DOM、更新UI。

React的历史与应用

应用场景

①前端应用开发 ②移动原生应用开发 ③结合Electron，进行桌面应用开发

历史

2010年 Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React设计
2011年 Jordan Walke创造了FaxJS，也就是后来的React原型
2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用
2013年 React正式开源
2014年至今生态大爆发，各种围绕React的新工具或新框架开始涌现

Recat的设计思路

以下从如何设计、为何这样设计两方面进行说明。

举例：在商品详情界面点击不同款式的商品，价格会随之进行改变。如果使用原生JS实现，会挂载很多onclick事件，比较复杂混乱。

UI编程痛点——①UI不会自动更新，需要手动地调用DOM进行更新。 ②欠缺基本的代码层面的封装和隔离，代码层面没有组件化。 ③UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

转换式系统≠响应式系统（监听事件，消息驱动，事件→执行回调→状态变更→UI更新）

响应式编程——①状态更新、UI自动更新。 ②前端代码组件化，可复用、可封装。 ③状态之间的互相依赖关系只需声明即可。

组件化

组件化遵循的准则

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部来控制子组件运转

注意：当前商品价格属于Root节点（父组件可将状态传入子组件），触发价格改变却是型号点击。在Root节点写一个改变当前价格的函数，将onChangeValue()向下传递，点击不同的型号，执行父组件传递下来的函数改变价格

状态归属问题

React是单向数据流，本质是父组件给子组件传递数据流，子组件只是执行对应程序，没有向父组件传递数据，这并不代表不能改变父组件的状态。
如何解决状态不合理上升的问题？详见React状态管理库部分
组件的状态改变后。如何更新DOM？详见React的实现部分

组件设计

组件声明了状态和UI的映射
组件有Props（从外部传入）/State（内部私有）两种状态
“组件”可由其他组件拼装而成

组件代码会是什么样子：组件内部拥有私有状态State；组件接受外部的Props状态提供复用性；根据当前的State/Props,返回一个UI。

举个不成熟的例子

生命周期

React（hooks）的写法

hooks写法是react两种写法其中的一种

什么是hooks？

import { useEffect, useState } from 'react'

在React中，Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或者事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。对于函数组件，这个结果是最终的DOM树；对于存在缓存的useCallback、useMemo组件，则是在依赖项发生变化时去更新缓存。

使用法则：不要在循环、条件或嵌套函数中使用hook

下图错误举例：y的状态是否存在不需要通过x去判断

useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数来实现状态的修改

useEffect：传入一个函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount时或依赖项被set的时候会执行。有“副作用”的函数要传入useEffect来执行（副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等）。

React的实现

需要解决的问题及解决方案

JSX不符合JS标准语法

解决方法如下图
返回的JSX发生改变时，如何更新DOM？

解决： Virtual DOM（虚拟DOM），是一种用于和真实DOM同比，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

命令式编程：定义处理事情的逻辑+实现处理事情的方法

响应式编程：异步编程范式，对观察者模式的拓展；

声明式编程：定义处理事情的逻辑框架

函数式编程：定义处理事情的逻辑+通过函数实现基本功能
State/Props更新时要重新触发render函数