这几天在经过各类资料，了解了 React 「出现的背景」，还有「前端发展的那些年」，不得不说，感受真的神奇！～数组
首先咱们来看看为何会产生 React 这个框架？浏览器
React 是 Facebook 在 2013 年开源的一款前端框架，在这以前，Facebook 工程师开发一个简单功能时，以下图界面中“小红点”功能：前端框架
在导航栏中有“新好友”、“新消息”和“新动态”三个功能按钮，这其实功能挺简单，但却常常出 BUG，好比“收到新消息后，新消息的图标上数字没有正确更新”等问题。微信
你们能够先猜一下致使这个问题可能的缘由。
咱们都知道 Facebook 工程师都是世界顶级水平，「他们找寻出现这种问题的深层次缘由」 ，最终总结为两个缘由：
1.「工程师太过关注 UI 层面的细节操做」；å
2.「应用程序的状态较为分散，没法追踪和维护」。
另外这里再介绍下 React 出现的时代背景：
1.「大量业务逻辑由后端转为前端实现」，即先后端分离；
2.已有前端框架开发的「复杂应用性能不佳」。
当时因为 Ajax 技术兴起，大量原来由服务端处理的逻辑，慢慢转移到前端作处理，这也是为了追求更流畅的 Web 交互体验。后来为了「提高开发效率和应用性能」，开始有不少大型前端框架出现（如：AngularJS），这些框架也让工程师们愈来愈关注 UI 层面的操做（如：频繁操做 DOM），「应用性能愈来愈差」，并伴随没法预知的 BUG 出现，就像前面讲到的 Facebook 工程师总结的缘由之一。
以后 Facebook 工程师开始打造本身的前端框架，解决前面总结的问题，因而 React 就诞生啦～
接下来就跟我一块儿，踏上 React 入门第一步吧！
1、React 介绍
1. 前端开发方式演进
-
前端混沌时代
在“前端混沌时代”，页面主要在服务端开发并生成，服务端生成什么页面，浏览器端就展现什么样的页面，这是时代，是多么单纯。
-
小前端时代
随后进入“小前端时代”，造成了以 HTML 为骨架，CSS 为外貌，JavaScript 为交互体验的前端开发模式，在这个时代，出现了 Ajax 这种划时代意义的技术，让静态网页升级为动态网页，并随着 JavaScript 的发展，前端能作更加多样的页面。当时出现了 jQuery 这类 JS 工具库，主要用来「操做 DOM」，「处理数据交互」，至今仍有不少老旧项目依然在使用 jQuery。
-
大前端时代
在小前端时代稳定发展一段时间以后，工程师们开始发现前端「须要呈现的数据量愈来愈大」，「网页动态交互效果也愈来愈多」，jQuery 这类工具库「愈来愈频繁操做 DOM」，使得应用性能愈来愈差，页面愈来愈卡，慢慢前端大佬们开始解决这些问题。
在 2009 年诞生了 NodeJS ，将前端带入全新方向，为 AngularJS（2009年诞生），React（2011年诞生）和 Vuejs （2014年诞生）三大框架的「诞生奠基基础」。这些框架经过必定的分析比较算法，实现同等效果下最小的 DOM 开销，提升应用性能。前端开发进入“大前端时代”。
-
全栈前端时代
“大前端时代”以后 NodeJS 社区蓬勃发展，4G 网络也在不断普及发展，不少传统 PC 网站开始转向手机、平板等移动端设备，开始出现了混合应用技术（Hybrid APP），出现了各类开发框架，如 Cordova、React-Native、Weex、Electron等，还有最近比较火的 Flutter。
随着 TypeScript 的出现，和 ECMAScript 标准日渐完善，「前端开发正在朝着更加全能化」，「多样化和更加细分领域的方向发展」。
2. React 介绍
React 是一个用于构建用户界面的 JavaScript 库，是用 JavaScript 构建「快速响应」的大型 Web 应用程序的首选方式。
因为 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却很是简单。因此，愈来愈多的人开始关注和使用，认为它多是未来 Web 开发的主流工具。
在 React 中，能够将页面中每一个部分分红每个独立的小模块，每一个小模块就是组建，这些组件能够互相组合和嵌套，就组成每个页面。相比传统操做 DOM 的前端开发方式，咱们「主要要关心的是应用中数据的变化」 ，React 会帮咱们将 UI 渲染完成。
以一个“用户推荐关注页面”为例子，能够将页面简单分为下面几个组件：
其中：
-
组件 UserPageComponent为：主页面组件； -
组件 HeaderComponent为：页面顶部标题栏组件； -
组件 ContentComponent为：页面主要内容区域组件； -
组件 FooterComponent为：页面底部操做组件； -
组件 UserInfoComponent为：通用用户信息组件； -
组件 CommonButtonComponent为：通用按钮组件。
接下来看下这个页面在 React 中是如何编写的吧～
class UserPageComponent extends React.Component {
// ...
render() {
return (
<div>
<HeaderComponent></HeaderComponent>
<ContentComponent></ContentComponent>
<FooterComponent></FooterComponent>
</div>
);
}
}
class ContentComponent extends React.Component {
// ...
render() {
return (
<div>
<UserInfoComponent></UserInfoComponent>
<UserInfoComponent></UserInfoComponent>
<UserInfoComponent></UserInfoComponent>
</div>
);
}
}
看起来就跟叠积木同样啦～～
看到这里，恭喜你已经了解了 React 而且知道 React 代码是如何编写的了！
接下来再来看看 React 各个重大版本的更新，这对于你了解 React 颇有帮助。
3. React 版本
咱们能够在 React 官网中查看 React 的版本迭代历史记录和更新内容：https://reactjs.org/versions/。
在 2017.09.26 Facebook 发布 React v16.0 版本，截止课程制做时，React 最新版本为 v16.13.1 ，且引入了大量的使人振奋的新特性，接下来将以 React v16.0 版本开始，介绍一些重要更新内容，快跟我一块儿看看吧！
-
「React v16.2.0 (November 28, 2017)」
增长 Fragment 组件，其做用是将一些子元素添加到 DOM tree 上且不须要为这些元素提供额外的父节点，至关于 render 返回数组元素。
-
「React v16.3.0 (March 29, 2018)」
增长 React.createRef() API，能够经过 React.createRef 取得 Ref 对象。
增长 React.forwardRef() API，它是 Ref 的转发, 让父组件可以访问到子组件的 Ref，从而操做子组件的 DOM。
-
「React v16.6.0 (October 23, 2018)」
增长 React.memo() API，它只能做用在简单的函数组件上，本质是一个高阶函数，能够自动帮助组件执行 。
增长 React.lazy() API，它提供了动态 import 组件的能力，实现代码分割。
-
「React v16.8.0 (February 6, 2019)」
增长 React Hooks，一种无需编写类便可使用状态和其余React功能的方法，用来解决状态逻辑复用问题，且不会产生 JSX 嵌套地狱。
改进 useReducer Hook 惰性初始化API。
2、闯关训练
请问 React 开发中，相比传统前端开发，咱们更须要关注什么？
A. 应用中 DOM 的变化
B. 应用中数据的变化
C. 应用中 UI 展现
答案：B
回复“加群”与大佬们一块儿交流学习~
点击“阅读原文”查看70+篇原创文章
本文分享自微信公众号 - 前端自习课（FE-study）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。