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

课程笔记

React的历史与应用

React是一个前端响应式框架。

React发展历史

• 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的应用领域

• 前端应用开发，如Facebook，Instagram，Netflix网页版。

• 移动原生应用开发，如Instagram，Discord，Oculus。

• 结合Electron，进行桌面开发。

React的设计思路

只有当我们认真的了解了React当初是为了解决哪些问题而出现的，在今后的React的学习与使用中才能更好的理解其用法和原理，就不会导致今后会很容易忘记。

UI编程痛点

如下这个苹果官网的购物UI界面

当我们想在选取颜色和型号时，右上角的手机价格也应随着我们所选择的不同配置来进行改变，如果使用传统的原生JS来编写这个功能，我们需要给很多的元素绑定点击事件，并使用callback来实现，这样就会陷入回到地狱，使得代码管理起来很麻烦。

总的来说原生的JS编写UI时有以下这些痛点：

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

转换式与响应式

• 转换式系统

  大致模型为给定输入求解输出

  常见的转换式系统为各类编译器，数值计算可以看做是一种简单的转换式系统

• 响应式系统

  大致模型为监听事件与消息驱动

  常见的响应式系统为监控系统和UI界面

当响应式系统应用于前端UI上时

以上四个过程就是我们在写前端UI时所需要实现的四个行为。

相比于原生JS编写前端UI时存在的问题，React对应的解决了这些问题

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

组件化

简单来说，组件化就是将页面的整体布局分为一个一个的组件，按照“组件树”的形式来在页面中呈现出来。

组件化的准则

• 组件是组件的组合或者原子组件。

  在上图“组件树”中Root组件就是由内容组件和顶栏组件组合而成的。

• 组件内部拥有自己的状态，外部不可见。

• 父组件可以将状态传入组件的内部

组件的状态归属问题

如上图的UI界面中的当前价格的状态应该属于谁呢？

当前价格只能属于Root节点！

Root节点作为根结点，只有将该状态放在Root节点，才能让后边的内容和顶栏两个子组件共享这个状态（即组件化准则中的第三条）。（但并不是指所有的共享状态都应放到Root节点，只是该例子恰好如此）

状态归属的基本原则：状态归属于两个节点向上寻找到最近的祖宗节点。（状态上升）

React状态管理库就能帮我们很好地解决这个状态归属问题。

React是单向数据流，还是双向数据流？

React是单向流，因为在React中只能是父组件给子组件传送东西，而不能子组件向父组件传东西，子组件一般通过父组件提供的函数来修改父组件提供的状态。

如何解决状态不合理上升的问题？

使用React状态管理库来进行解决。

组件设计

组件设计经验

• 组件声明了状态和UI的映射。

  映射可以看成是函数

• 组件有Props/State两种状态。

  State表示组件内部的状态，Props表示由组件外部传入的状态。

• “组件”可由其他组件拼装而成。

组件代码的样子

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

React（hooks）的写法与React实现

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React特性。

Hooks写法的代码类似下图

在React中声明一个组件的新状态需要手动的去调用useState这个函数，该函数传入一个状态的初始值，返回值为一个数组，该数组的第一个函数为状态本身，第二个函数是这个状态的seter。上图代码实现了一个简单的点击按钮更新UI的功能。

这个部分的代码多了一个useEffect函数，该函数用于解决组件的副作用。

React的实现

JSX不符合JS语法标准怎么办？

将JSX转译（将一个语言的语法转换为另一个语言的语法）为JS语法标准，如下图所示

可以使用Babel来实现上述功能。

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

JSX的返回值是一个类似DOM片段的东西但其实它不是DOM，其称为虚拟DOM（Virtual DOM）。

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

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

（真实的DOM不是JS中的对象而是浏览器内部维护的一个状态，我们只能通过DOM接口修改DOM）

React状态管理库

核心思想

即将状态抽离到UI外部进行统一管理。

劣势：降低组件的复用性。

状态管理库推荐：

状态机

当前状态，收到外部事件，迁移到下一个状态。

Modern.js/Reduck

应用级框架科普

总结

通过本次课程大致对React框架有了一定的了解，刚入门React还有很多不明白和不理解的地方，还需要后边多加学习才行。