这是我参与「第四届青训营」笔记创作活动的的第9天

React 的历史与应用

2010年 Facebook在其php生态中，引入了hp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
**2011年 **Jordan Walke创造了FaxJS,也就是后来的React原型;

**2012年 **在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了 React。
**2013年 **React正式开源，在2013 JSConf 上 ** Jordan Walke **介绍了这款全新的框架
2014年-今天生态大爆发，各种围绕 React 的新工具/框架开始涌现

React 的设计思路

UI 编程痛点

状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 “Callback Hell'"。

响应式与转换式

响应式系统

响应式编程

前端 UI 状态更新，U‖自动更新。

“状态更新，UI不会自动更新，需要手动地调用DOM进行更新。

前端代码组件化，可复用，可封装，

欠缺基本的代码层面的封装和隔离，代码层面没有组件化。

状态之间的互相依赖关系，只需声明即可。

UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell'”。

语法

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{ 就当JavaScript解析.

React 生命周期

16.3之前的版本

16.3版本

16.4 版本以后

图解网站 projects.wojtekmaj.pl/react-lifec…

React 的实现

Virtual DOM (虚拟 DOM)

Virtual DOM 是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来

How to Diff

完美的最小Diff算法，需要 O(n^3) 的复杂度。 牺牲理论最小Diff,换取时间，得到了O(n)复杂度的算法： Heuristic o(n) Algorithm

React 状态管理库

应用级框架

NEXT.js

简介

Next.js 是一个轻量级的 React 服务端渲染应用框架。用一个框架，就要知道它的优点（或者是解决了我们什么问题）:

完善的React项目架构，搭建轻松。比如：Webpack配置，服务器启动，路由配置，缓存能力，这些在它内部已经完善的为我们搭建完成了。
自带数据同步策略，解决服务端渲染最大难点。把服务端渲染好的数据，拿到客户端重用，这个在没有框架的时候，是非常复杂和困难的。有了Next.js，它为我们提供了非常好的解决方法，让我们轻松的就可以实现这些步骤。
丰富的插件帮开发人员增加各种功能。每个项目的需求都是不一样的，包罗万象。无所不有，它为我们提供了插件机制，让我们可以在使用的时候按需使用。你也可以自己写一个插件，让别人来使用。
灵活的配置，让开发变的更简单。它提供很多灵活的配置项，可以根据项目要求的不同快速灵活的进行配置。

目前Next.js是React服务端渲染的最佳解决方案，所以如果你想使用React来开发需要SEO(搜索引擎优化)的应用，基本上就要使用Next.js。

响应式系统与 React | 青训营笔记