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

React 的历史与应用

应用场景

1. 前端应用开发，如Facebook、Netflix网页版
2. 移动端原生应用，如Android、IOS的app
3. 结合Electron，进行桌面应用开发

发展历史

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型
• 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React
• 2013年，React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架
• 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

React 的设计思路

UI编程的痛点

1. 状态更新的时候，UI不会自动更新，需要手动调用DOM接口进行更新
2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地狱

React的出现，就是为了解决这三大痛点

响应式与转换式

• 转换式系统：给定输入求解输出，比如编译器的实现，数值计算等场景
• 响应式系统：监听事件，由消息驱动，需要有一个监控系统去关注事件，并对事件做出响应，更新UI界面

前端开发的场景中，转换式系统不适合，而响应式系统就能完美解决前面的三大痛点

响应式编程

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

组件化

用树状结构表示组件之间的关系

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

状态归属问题

下面这个图中，右上角的当前价格数据应当归属到那个组件去管理？

答案是属于根节点Root 因为这个属性会被多个子组件共享，这也导致了一个问题，当多个子组件需要共享数据的时候，就得将共享数据提升到父组件中，这其实是不好的，既然现在知道当前价格是由Root结点管理的，那子组件需要修改当前价格时该怎么办呢？由于在js中，函数是一等公民，所以可以将函数也作为属性传递给子组件，那么就可以在Root组件中定义一个修改当前价格的函数，然后将这个函数传给子组件，当子组件需要修改当前价格时，就调用该函数即可。

组件设计

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据
• 组件可由其他组件拼装而成

React（hooks）的写法

hooks 的定义

"hooks" 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：

系统运行到某一时期时，会调用被注册到该时机的回调函数。

比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。

React 的实现

三个问题

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

React 状态管理库

应用级框架科普

推荐：