一，react的历史与应用 1.前端应用开发，如Facebook Instagram Netflix网页版2.移动原生应用开发，如Instagram discord oculus3.结合electorn，进行桌面应用开发。 首次引入了组合式组件的思想，jaxjs 1.既可以在客户端渲染，又可以在服务端渲染2.响应式的（当状态变更了～ui也会自动更新）3.性能好 4.给前端代码做了组件级别的复用和分装，然后用函数声明，也是html片段可以直接在js里声明。 二，react的设计思路 用原生的js～ui的痛点 1.状态更新，ui不会自动更新，需要手动的调用dom进行更新，2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化3.ui之前的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到callbackhell。 转换式系统（给定输入，求解输出，编译器，数值计算）不等于响应式系统（监听事件，消息驱动，监控系统，UI界面） 响应式系统：事件→执行既定的回调→状态变更→ui更新，响应式编程：1.状态更新，ui自动更新（状态更新，UI不会自动更新，需要手动的点用dom进行更新）2.前端代码组件化，可复用，可封装（欠缺基本的代码层面的封装和隔离，代码层面没有组件化）3.状态之间的相互依赖关系，只需要声明即可（ui之间的数据依赖关系，需要手动维护如果依赖链路长，则会遇到callbackhell） 组件化比如购买苹果手机的页面，root分为内容和顶栏，而内容又分为橱窗和配置面板，而配置面板又分为型号选择和颜色 进行onclick，总的来说1.组件是组件的组合或原子组件2.组件内拥有状态，外部不可见3.父组件可将状态传入组件内部 在上述的苹果购买页面中显示的当前价格应该属于root节点。 重点是状态归属于两个节点向上寻找到最近的祖宗节点。13pro的界面只是单纯执行了onchange value（）函数而已而这个value函数改变了root状态而已。onchangevalue函数把root传到了13pro，只有父传子。react是单向数据流。 组件设计：1.组件声明了状态和ui的映射，2.组件有props或state两种状态3.组件可由其他组件拼装而成。组件内部拥有私有状态state2.组件接受外部的props状态提供复用性3.根据当前state或props，返回一个ui。关键时间点：挂载的时候，卸载的时候，状态改变时候。 hook使用法则不要再循环，条件或嵌套函数中调用hook。 react的实现～问题1.jsx不符合js标准语法（transpel转译如c++，到js）2.返回的jsx发生改变时如何更新dom（virtual dom是一种用于和真实同步，而js内存中维护一个对象，他具有和dom类似的树状结构，并和dom可以建立一一对应关系，他赋予了react声明式的api您告诉react希望让ul是什么状态，react就确保dom匹配该状态。这使您可以从属性操作，事件处理和手动dom更新，这些在构建应用程序时必要的操作中解放出来）3.state或props更新时要重新触发render函数。how to diff？更新次数少←→通过tradeoff权衡，计算速度快。 heuristic o（n）完美的最小diff算法，需要o（n的3次方）的复杂度。牺牲理论最小diff换取时间，得到了o（n）复杂度的算法。 不同类型的元素～替换，同类型的dom元素～更新，同类型的组件元素～递归。核心思想react状态管理库，解决都堆积在root，将状态抽离到ui外部进行统一管理，这会降低组件的复用性。recommend：redux，xstate，mobx，recoil。
