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

终于进入React框架部分的学习，为了更好地学习React技术原理，先来了解有关前端框架 React 的发展历史。

1.前端应用开发

2.移动原生应用开发

3.结合Electron，进行桌面应用开发

为什么会产生 React 这个框架？

React 是 Facebook 在 2013 年开源的一款前端框架，在这之前，Facebook 工程师开发一个“小红点”简单功能时： 在导航栏中有“新好友”、“新消息”和“新动态”三个功能按钮，这其实功能挺简单，但却经常出 BUG，比如“收到新消息后，新消息的图标上数字没有正确更新”等问题。

出现这个问题可能的原因是什么呢？

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

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

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

另外这里再介绍下 React 出现的时代背景： 前后端分离

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

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

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

React诞生及发展的时间线

Facebook 开源了PHP 语言 的一种扩展叫—— XHP，可以在 PHP 中创建 Composite Components。你去看 XHP 就会发现语法和 JSX 很像。事实上，之后，他们也将这种新语法引入到了 React 中。

Jordan Walke 创建了 FaxJS ，它就是 React.js 早期的原型。

简单认识React并编写几个小组件

React 是一个用于构建用户界面的 JavaScript 库，是用 JavaScript 构建快速响应的大型 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的诞生原因以及其历史后，我们能更好地理解当时的技术需求，对之后的学习有了更清晰的认知。