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

前言

我学的是vue的框架，我们项目组也是vue3做的，所以对react没办法做一个特别深入的学习了，只能说目前做一个了解，因为一个框架的学习是比较花时间的，我vue都学了好久，还没有做具体项目呢。

React简介

react是facebook开发的，facebook在构建instagram网站的时候遇见两个问题：

数据绑定的时候，大量操作真实dom，性能成本太高，比较浪费网站的数据流向太混乱，不好控制于是facebook起初调研过市场上已存的mvc框架，比如angularjs，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源，国内2016年才开始首先在杭州使用。

声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）

高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互

灵活 −React可以与已知的库或框架很好地配合，比如（jquery库）

JSX − JSX 是 JavaScript 语法的扩展

组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中

单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。（这个在前端框架里都是一样的，vue也强调单向数据流）

React 设计思路

UI编程痛点：

响应式编程

响应式编程：

状态更新前端代码组件化状态之间的互相依赖关系

组件化总结：

生命周期：

mount-update-unmount

React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减少DOM交互。

跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。

单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减少了重复代码，这也是它为什么比传统数据绑定更简单。

同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

React 只是一个视图库，而不是一个完整的框架。

对于 Web 开发初学者来说，有一个学习曲线。

将 React 集成到传统的 MVC 框架中需要一些额外的配置。

代码复杂性随着内联模板和 JSX 的增加而增加。

如果有太多的小组件可能增加项目的庞大和复杂。