这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
本堂课重点内容
-
React 的发展历史
-
React 的应用场景
-
React 的设计思想
-
响应式编程/函数式编程的设计思想
-
其他 react 生态框架科普
React的设计思路
UI编程痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Calback Hell”。
响应式系统（监听事件，消息驱动。监控系统 UI界面）
React响应式编程
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
组件
组件
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计1.0
- 组件声明了状态和UI的映射
- 组件有Props/State 两种状态（Props：外部传入，State：内部私有）
- “组件”可由其他组件拼装而成
组件设计2.0
- 组件内部拥有私有状态State。
- 组件接受外部的Props 状态提供复用性。
- 根据当前的State/Props，返回一个Ul。
状态归属
如果想让两个组件的状态共享，这个状态应该归属于两个节点向上寻找到最近的祖宗节点
React是单向数据流，数据从父组件流向子组件
生命周期
hooks
React Hooks 是一种在 React 函数组件中添加状态和其他 React 特性的新方法。它们可以让您在不编写类的情况下使用 state 和其他 React 特性。
useState: 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect: 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。
有"副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算 之外，还要做其它的一一些事情，比如网络请求，更新DOM, localStorage 存储数据等。
Hook使用法则: 1.不要在循环，条件或嵌套函数中调用Hook。
React的实现
Problem
JSX不符合JS语法标椎
返回的JSX发生改变时，如何更新DOM？
State/Props 更新时，要重新触发render函数
解决：
通过React.createElement方法等去转换
Virtual DOM (虚拟DOM)
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系。
它赋予了React 声明式的API ：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
React状态管理库
核心思想
将状态抽离到UI外部进行统一管理
状态管理库推荐
状态机
当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
课后个人总结
学完React的课程，收获挺多的，了解了React的设计思想，明白这个框架是为了解决什么样的痛点，也了解到React框架在实现过程中的一些细节问题，还了解到一些应用级的框架。
