响应式系统与React（下）｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

React（hooks）的写法

useState

传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

Hook 使用法则

1.不要在循环，条件或嵌套函数中调用Hook。

React 的实现

现存的Problem：

1. JSX不符合JS标准
2. 返回的JSX发生改变时，如何更新 DOM
3. State/Props 更新时，要重新触发 render函数

JSX不符合JS标准：

转义：

返回的JSX发生改变时，如何更新 DOM

使用vdom：

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

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

使用Diff算法更新DOM的过程

如果减低Diff算法的复杂度：

1. 不同类型的元素：替换
2. 同类型的DOM元素：更新
3. 同类型的组件元素：递归

React 状态管理库

核心思想

将状态抽离到UI外部进行统一管理：可以将这个store当成一个大组件管理 关键在于，将哪些状态放在管理库里面： 整个App都用到的

Modern.js/Reduck

应用级框架科普

1. Next.js

硅谷明星创业公司Vercel的React 开发框架，稳定，开发体验好，支持Unbundled Dev，SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”

2. Modren.js

字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。

3. Blitz

无API思想的全栈开发框架，开发过程中无需写API 调用与CRUD逻辑，适合前后端紧密结合的小团队项目。