这是我参与「第四届青训营 」笔记创作活动的第9天
本堂课重点内容
- React 的历史与应用 - 介绍 React 的发展历史以及应用场景
- React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样
- React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks
详细知识点介绍
React历史与应用
2010年 Facebook在其php生态中.引入了xhp框架.首次引入了组合式组件的思想.启发了后来的React的设计。
2011年 Jordan Walke创造了FaxJs，也就是后来的React原型:
四大特性：
2012年在Facebook收购Instagrem后.该FaxJS项目在内部得到使用,Jordan Walke基于FaxJS 的经验.创造了 React.
React的设计思路
motivation
01.状态更新, ul不会自动更新,需要手动地调用DOM进行更新。
02.欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
03.Ul之间的数据依赖关系,需要手动维护，如果依赖链路长,则会遇到“ Call back Hell”。
UI界面、监控系统此类响应式系统需要根据监听事件来进行消息驱动，“事件->执行既定的回调->状态变更->UI更新”
基于此，React解决编程痛点
组件化
1.组件是组件的组合/原子组件
2.组件内拥有状态，外部不可见
3.父组件可将状态传入组件内部
-
组件声明了状态和U的映射。
-
组件有Props(父组件传递）/State（组件内部状态）两种状态。
-
“组件”可由其他组件拼装而成。
1.组件内部拥有私有状态 State。
2.组件接受外部的Props状态提供复用性。
3.根据当前的 State/Props，返回一个Ul。
生命周期
React（hooks）的写法
使用useState接收状态和变更状态的函数，组件button改变count后，状态更新，对应组件更新，触发render函数，UI更新。
virtual DOM(虚拟DOM )
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API:您告诉React希望让U是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
virtual DOM 到 浏览器DOM的更新
完美的最小Diff算法﹐需要o(n^3）的复杂度。 牺牲理论最小Diff ,换取时间,得到了o(n)复杂度的算法:
diff原则
React状态管理库
将状态抽离到ul外部进行统一管理，属于状态机：当前状态,收到外部事件,迁移到下一个状态
常用的有 redux、xstate、mobx、recoil
课后个人总结
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
