这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
这篇文章重点讲述了React的历史与应用和设计思路。
一、React的历史与应用
React的应用
-
前端应用开发，如
Facebook，Instagram，Netflix网页版。 -
移动原生应用开发，如
Instagram，Discord，Oculus。 -
结合
Electron，进行桌面应用开发。
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 介绍了这款全新的框架: React。2014年-今天生态大爆炸,各种围绕 React 的新工具/新框架开始涌现。
二、React的设计思路
UI编程的痛点
- 状态更新，UI不会自动更新，需要手动地调用DOM接口进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
React的出现，成功解决了这些痛点。接下来让我们看一下React的设计思路。
响应式与转换式
-
转换式系统：就是给定输入让你求解输出。
-
响应式系统：它主要是监听事件，由消息驱动。
它们两个是有区别不相等的。
知道了响应式，那么响应式该如何编程呢？下面来看响应式编程。
响应式编程
1.状态更新，UI自动更新。
状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
2.前端代码组件化，可复用，可封装。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3.状态之间的互相依赖关系，只需声明即可。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 "Callback Hell"。
组件化
组件的概念
- 组件是组件的组合/原子组件
- 组件内拥有自己的状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题
这里有一个问题：当前价格状态属于哪个组件？
答案是：属于Root节点
状态归属于两个节点向上寻找到最近的祖宗节点。离当前价格状态最近的祖宗节点为Root节点，所以前价格状态属于Root节点。
那么如何改变当前价格状态呢？
解决方法为：将onChangeValue()向下传递。
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- 组件可由其他组件拼装而成
组件代码
- 组件内部拥有私有状态 State。
- 组件接受外部的Props状态提供复用性。
- 根据当前的State/Props，返回一个Ul。
生命周期
三、总结
通过对React的学习和了解，我知道了它的发展历史和它在各方面的应用，并且知道如何完整的设计React。同时，通过了解相关知识，我知道了React可以替代DOM,用于敏捷开发,快速搭建前端web项目，而这样可以大大提高浏览器的效率，在前端的设计中，它起到了很大的作用。
