React 与前端开发发展史

最近原创文章😊：



• 《1.2w字 ｜ 初中级前端 JavaScript 自测清单 - 1》

• 《了不起的 Webpack HMR 学习指南（含源码分析）》

• 《了不起的 Webpack 构建流程学习指南》

• 《你不知道的 WeakMap》番外篇

• 《你不知道的 Blob》番外篇

• 《了不起的 tsconfig.json 指南》

• 《200行JS代码，带你实现代码编译器》



这几天在通过各种资料，了解了 React 出现的背景，还有前端这些年的变换，不得不说，感觉真的神奇！



本文将带大家了解「前端发展的那些年」还有 React 「出现的背景」～



首先我们来看看为什么会产生 React 这个框架？



React 是 Facebook 在 2013 年开源的一款前端框架，在这之前，Facebook 工程师开发一个简单功能时，如下图界面中“小红点”功能：





在导航栏中有“新好友”、“新消息”和“新动态”三个功能按钮，这其实功能挺简单，但却经常出 BUG，比如“收到新消息后，新消息的图标上数字没有正确更新”等问题。



大家可以先猜一下导致这个问题可能的原因。



我们都知道 Facebook 工程师都是世界顶级水平，「他们找寻出现这种问题的深层次原因」 ，最终总结为两个原因：



1.「工程师太过关注 UI 层面的细节操作」；å



2.「应用程序的状态较为分散，无法追踪和维护」。



另外这里再介绍下 React 出现的时代背景：



1.「大量业务逻辑由后端转为前端实现」，即前后端分离；



2.已有前端框架开发的「复杂应用性能不佳」。



当时由于 Ajax 技术兴起，大量原来由服务端处理的逻辑，慢慢转移到前端做处理，这也是为了追求更流畅的 Web 交互体验。后来为了「提升开发效率和应用性能」，开始有很多大型前端框架出现（如：AngularJS），这些框架也让工程师们越来越关注 UI 层面的操作（如：频繁操作 DOM），「应用性能越来越差」，并伴随无法预知的 BUG 出现，就像前面讲到的 Facebook 工程师总结的原因之一。



之后 Facebook 工程师开始打造自己的前端框架，解决前面总结的问题，于是 React 就诞生啦～





接下来就跟我一起，踏上 React 入门第一步吧！



一、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。



React 版本大概介绍到这里，相信这里还有很多知识你还不清楚，但是没关系，接下来的课程，我们将一一解答～



二、闯关训练



请问 React 开发中，相比传统前端开发，我们更需要关注什么？



A. 应用中 DOM 的变化



B. 应用中数据的变化



C. 应用中 UI 展示



答案：B



公众号：前端自习课