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

一、React历史和应用

1、前端应用开发：

Facenook、Instagram、Netflix网页版

2、移动原生应用开发：

Instagram、Discord、Oculus

3、桌面应用开发：

结合Electron对桌面应用进行开发

二、React的设计思路

1、转换式系统： 给定输入，求解输出。比如编译器、数值计算。
2、响应式系统： 监听事件，通过消息驱动。比如监控系统，UI界面。在事件发生之后，会执行既定的回调函数来变更当前状态。 所以，如果反应到前端上，则应该是发生事件，然后执行回调函数来变更状态，同时对UI进行更新处理。

3、响应式编程：
根据前面响应式系统的的思路，响应式编程应该满足以下条件：
①状态更新时，UI能够自动更新
②前端代码组件可，可以复用与封装
③状态之间的相互依赖的关系只需要进行声明就可以

4、组件化：
①组件声明了状态与UI的映射 ②组件有Props/State两种状态，其中Props是外部传入的组件属性 ③组件可由其他的组件拼装而成，有点像搭建积木的原理。

三、React和hooks

1、什么是hooks？
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks，使开发者在非class的情况下使用更多react特性。

2、hooks的特点有：
①在不用修改组件结构的情况下能够多次使用状态逻辑；
②可将组件中相互关联的部分拆分成更小的函数，因此复杂组件将变得更容易理解；
③每一个组件内的函数(包括事件处理函数，effects，定时器或者api调用等等)会捕获某次渲染中定义的props和state；
④每次render都有自己的props、state和effects。(每一个组件内的函数，包括事件处理函数，effects，定时器或者api调用等等，会捕获某次渲染中定义的props和state)；
⑤更新状态的时候(如setCount(count + 1))，React会重新渲染组件，每一次渲染都能拿到独立的count状态，这个状态值是函数中的一个常量；
⑥函数式编程，不需要定义constructor、render、class；

四、React状态管理库

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

2、状态管理库推荐： redux、xstate、mobx、recoil等

3、应用级框架科普：
NEXT.js： 是一个React开发框架，稳定，开发体验好，可以帮助快速完成部署。
MODERN.js： 是字节跳动Web Infra团队研发的全栈开发框架，内置了许多开箱即用的能力。
Blitz： 是一个无API思想的全栈开发框架，适合前后端开发紧密结合的小团队项目。