响应式系统与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