「第五届青训营 」笔记创作活动的第5天

一、本堂课重点内容：

• React 的历史与应用 - 介绍 React 的发展历史以及应用场景。

• React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。

• React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。

二、详细知识点介绍：

react设计思路

1. UI编程痛点

   a. 状态更新，UI不会自动更新，需要手动调用DOM进行更新

   b. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化

   c. UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到callback hell

2. 响应式编程

   a. 状态更新，UI自动更新

   b. 前端代码组件化，可复用，可封装

   c. 状态之间相互依赖，只需要声明即可

3. 转换式系统：给定输入求解输出 编译器、数值计算

   响应式系统：监听事件，消息驱动 监控系统、UI界面

4. 组件化

   a. 组件是组件的组合/原子组件

   b. 组件内拥有状态，外部不可见

   c. 父组件可将状态传入组件内部

   d. 组件声明了状态和UI的映射

   e. 组件有props/state两种状态

   组件内部拥有私有状态state，接收外部的props状态提供复用性，根据当前的state/props返回一个UI

5. 状态归属：属于两个节点向上寻找到最近的祖宗节点

hooks

1. useState

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

2. useEffect

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

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

3. hook使用法则

   不要在循环、条件或嵌套函数中调用hook

4. virtual DOM

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

react状态管理库

将状态抽离到UI外进行统一管理，如redux、xstate、mobx

三、实践练习例子：

hook实现练习

四、课后个人总结：

课程从react的实现思想切入，很适合初学者理解，但我对于hook的实现、JSX的写法方面还是不太理解。