React学习
1.React的设计思路
响应式系统
监听事件，消息驱动
事件->执行既定的回调->状态变更->UI更新
组件化
- 组件是组件的组合
- 组件内拥有状态，外部不可见
- 父组件可将状态传递给子组件
- 组件要声明状态和UI的映射
- 组件有props/state两种状态
- “组件”可由其他组件组成
我认为组件化的宗旨在于我们可以将整个系统拆分成多个独立的，可以重用的组件，这些组件都被定义好了明确的功能和接口，我们可以通过组件化来达到功能的复用和可维护性的提升，我们可以只用专注组组件的优化和测试，从而降低了在开发时考虑整个系统的复杂度
状态归属问题
抽象每一个局部的状态来进行全局的响应
- React为单项数据流：只能由父组件将状态传递给子组件
- Dom更新
我认为状态归属问题我们可以首先确定哪些组件需要共享状态。如果多个组件需要访问和更新相同的状态，那么这些组件应该共享状态。然后我们也可以将状态定义在共享状态的最近的共同父组件中。这样，所有需要访问该状态的子组件都可以通过props接收到该状态。在父组件中定义一个回调函数，用于更新状态。将这个回调函数作为props传递给子组件。在子组件中，当需要更新状态时，调用父组件传递的回调函数。父组件中的回调函数将更新状态，并通过props将新的状态传递给所有子组件。
2.React（hooks）的写法
import React , { use State } from 'react'
function Example(){
const [count,setCount] = useState(0);
//定义一个新的状态，将会响应 count
return(
<div>
<p> You Clicked {count} times </p>
<button onClick={() => setCount(count + 1)}>Click me !</button>
</div>
);
}
useState
传入一个初始值，返回一个状态，set该状态的函数，用户可以通过该函数来实现状态的修改
其用于在函数组件中定义和管理状态。它返回一个数组，第一个值是当前状态的值，第二个值是更新状态的函数。
useEffect
传入一个函数，和一个数组，数组是状态的数组称作依赖项，该函数再mount是和依赖项被set时会执行
有“副作用”的函数要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情。比如网络请求，更新DOM，localStorage存储数据等 其用于在函数组件中执行副作用操作，例如订阅事件、发送网络请求等。它类似于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount的合并。useEffect接受一个回调函数作为参数，并在每次组件渲染后执行该回调函数。
我认为Hooks的意义在于简化了函数组件的编写和管理状态的方式，使得函数组件能够具备类组件的功能。使用Hooks，可以避免类组件中繁琐的生命周期方法和this的使用。
3.React的实现
Virtual DOM（及时响应）
Virtual Dom是一种用于和真实DOM同步。而在JS内存中维护的一个对象，它具有和DOM类似的树状结构并和DOM可以一一的建立对应关系。
DOM本身是浏览器的组成部分，JS是通过DOMAPI来修改DOM的，但是Virtual DOM是JS内部维护的
那么设计Diff算法就是最关键的用于实现rerender的步骤
| 不同类型的元素 | 替换 |
|---|---|
| 同类型的DOM元素 | 更新 |
| 同类型的组件元素 | 递归 |
4.React状态管理库
核心思想在于:将状态抽离到UI外部进行统一管理
主要有redux,xstate,mobx,recoil等状态管理库
状态机
当前状态,收到外部事件,迁移到下一个状态
有限状态机：有限状态机是指状态的数量是有限的，可以精确地定义状态之间的转换规则。它通常由一个初始状态开始，根据输入事件执行一系列转换操作，最终到达接受状态或终止状态。
三个重要的组成部分：状态：包括起始状态、中间状态、接受状态、终止状态等；输入事件：触发状态转换的外部输入；转换规则：描述了在每个状态下，接受哪些输入事件并转换到哪个新状态。
无限状态机：无限状态机是指状态数量是无限的，通常用于描述具有无限可能性的系统，如操作系统的进程管理器。
应用级框架科普
- NEXT.js
- MODERN.js
- Blitz
小结
在本次对React的初步学习中,对响应式前端开发有了很深入的了解,但是知识的深度还需要自己去继续学习实践来进行tan'suo
