响应式系统与react笔记 | 青训营笔记
1 React简介
1.1 react发展历史：
react是facebook开发的，facebook在构建instagram网站的时候遇见两个问题：
数据绑定的时候，大量操作真实dom，性能成本太高，比较浪费 网站的数据流向太混乱，不好控制 于是facebook起初调研过市场上已存的mvc框架，比如angularjs，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源，国内2016年才开始首先在杭州使用。
1.2 react 特点：
声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）
高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互
灵活 −React可以与已知的库或框架很好地配合，比如（jquery库）
JSX − JSX 是 JavaScript 语法的扩展
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
1.3应用场景
-
前端应用开发 | Web 端
-
移动原生应用开发
-
桌面应用开发（联合 electron）
-
React 设计思路
-
响应式编程
- 状态更新
- 前端代码组件化
- 状态之间的互相依赖关系
-
组件化
- 组件是组件的组合或原子组件
- 组件内有状态 states
- 父组件可向组件内部传入状态 props
-
状态归属
- 组件声明状态和UI映射
- 组件有 props 和 state 两种状态
- 组件可由其他组件构成
-
生命周期
- mount
- update
- unmount
1.4 React的优点
React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减少DOM交互。
跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减少了重复代码，这也是它为什么比传统数据绑定更简单。
同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
1.5 React 的缺陷
React 只是一个视图库，而不是一个完整的框架。
对于 Web 开发初学者来说，有一个学习曲线。
将 React 集成到传统的 MVC 框架中需要一些额外的配置。
代码复杂性随着内联模板和 JSX 的增加而增加。
如果有太多的小组件可能增加项目的庞大和复杂。
2 React工程目录简介
工程目录如下：
node_modules文件夹
- 里面存放的是我们所建项目放所依赖的第三方的包
src 文件夹
index.js（all in js） 整个程序的入口文件，也就是整个项目从index.js 里面开始逐行执行
ServiceWorker 为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度
App.test.js 自动化的测试文件
应用级框架
全栈开发框架
Next.js
Modern.js
Blitz