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

React的历史与应用

应用

• 前端应用开发
• 移动原生应用开发
• 结合Electron，进行桌面应用开发

React的设计思路

原生JS编写UI痛点

• 状态更新，UI不会自动更新，需手动调用DOM进行更新
• 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• UI之间的数据依赖关系，需手动维护，如果依赖链路长，则会遇到“Callback Hell”（回调地狱）

响应式系统工作过程

事件发生后执行既定的回调函数，函数导致系统的状态变更

响应式编程

• 状态更新，UI自动更新
• 前端代码组件化，可复用，可封装
• 状态之间的互相依赖关系，只需声明即可

组件化

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

状态归属问题

若两个组件的状态共享，那么状态归属于两个节点向上寻找到最近的祖宗节点（状态上升）

组件设计

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

Reack(hooks)的写法

useState

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

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行，有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求，更新dom，localStorage存储数据等。

使用法则： 不要在循环、条件或嵌套函数中调用Hook

React状态管理库

核心思想： 将状态抽离到UI外部进行统一管理