REACT ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第12天一、本堂课重点内容：讲述了react的历

这是我参与「第四届青训营」笔记创作活动的第12天

一、本堂课重点内容：

讲述了react的历史与应用、设计思路、hooks的写法、实现、状态管理库以及应用级框架科普等等。

二、详细知识点介绍：

设计思路

UI痛点

状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
- 状态更新，UI自动更新
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- 前端代码组件化，可复用，可封装
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
- 状态之间的互相依赖关系，只需声明即可

转换式系统：给定输入求解输出。编译器，数值计算
响应式系统：监听事件，信息驱动。监控系统，UI界面

总结

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

想让两个组件的状态共享，状态就应该归属于两个节点向上寻找到最近的祖宗节点

react是单向数据流
状态管理库用于解决状态不合理上升的问题

组件设计

组件声明了状态和UI的映射。
组件有Props/State两种状态。
“组件”可由其他组件拼装而成。

组件代码

组件内部拥有私有状态 State。
组件接受外部的Props状态提供复用性。
根据当前的State/Props,返回一个UI。

function Component(props){
    // props是父组件传入的状态
    const { url } = props;
    this.text ='点击我';//状态

    //返回一个“UI”
    return (<div>
        <SubComponent props=f{{color: 'red'}}></SubComponent>
        <img src={url}></img>
        <button>text</button>
    </div>)
)

HOOK

不要在循环、条件、嵌套的时候调用hook

useState

传入初始值，返回一个状态，和Set该状态的函数。
实现状态的修改。

useEffect

组件挂载的时候进行更新。
传入一个函数和一个数组。数组是状态的数组，称作依赖项。
在mount和依赖项被set的时候执行

虚拟dom

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

它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM 匹配该状态。这便您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

不同类型的元素：替换
同类型的ODM元素：更新
同类型的组件元素：递归

状态管理库

将状态抽离到ui外部进行统一管理。

状态管理库：store。最好只把整个app都要获取的状态存储到store

redux,xstate（状态机）,mobx,recoil

状态机：当前状态，收到外部事件，迁移到下一个状态。

REACT ｜ 青训营笔记