REACT学习笔记

来源：互联网发布：知是故人来编辑：程序博客网时间：2024/05/16 10:23

{  "name": "demo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "jest"  },  "repository": {    "type": "git",    "url": "git+https://github.com/MengStar/demo.git"  },  "author": "mengstar",  "license": "ISC",  "bugs": {    "url": "https://github.com/MengStar/demo/issues"  },  "homepage": "https://github.com/MengStar/demo#readme",  "dependencies": {  }}

对关键字的含义不懂的同学可以百度查阅一下。

1.2.使用NPM安装REACT和相关工具

安装好NPM或者CNPM（我使用的是cnpm）之后，在控制台输入：

cnpm insatll --save reactcnpm insatll --save react-domcnpm insatll --save jest-clicnpm insatll --save gulpcnpm insatll --save browserifycnpm insatll --save reactifycnpm insatll --save vinyl-source-stream

输入–save参数可以更新你的package.json。如果别人用你的
package.json，就可以通过输入cnpm install 来完成全部安装了。其中

react和react-dom插件是react的主体
jest-cli是facebook官方推出的测试框架
gulp是自动化构建工具
browserify实现js的模块化加载
reactify可以将jsx解析为js
vinyl-source-stream可以让gulp和browserify配合起来使用

1.3.相关工具的使用简介

2.REACT基础知识

3.FLUX框架入门

3.0.FLUX框架简介

Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想，不需要太多新的代码你就可以马上使用Flux构建你的应用。

3.1.FLUX架构和数据流

在Flux应用中数据是单向流动的：

单向的数据流是Flux应用的核心特性，上图应该成为Flux程序员的主要心智模型。Dispatcher，stores和views是拥有清晰的输入输出的独立节点。而actions是包含了新的数据和身份属性的简单对象。

用户的交互可能会使views产生新的action，这个action可以在整个系统中传播：

所有的数据的流动都通过中枢dispatcher。Action可以通过action creator产生并被提供给dispatcher，但多数情况下action是通过用户与views的交互产生。dispatcher接收到action并执行那些已经注册的回调，向所有stores分发action。通过注册的回调，store响应那些与他们所保存的状态有关的action。然后store会触发一个 change 事件，来提醒controller-views数据已经发生了改变。Controller-views监听这些事件并重新从store中获取数据。这些controller-views调用他们自己的setState()方法，重新渲染自身以及组件树上的所有后代组件。

这种的响应式编程，或者更准确的说数据流编程亦或基于数据流的编程，可以使我们很容易去推断我们的应用是如何工作的。因为我们的应用中数据是单项流动的，不存在双向绑定。应用的状态只保存在store中，这就允许应用中不同部分保持高度的低耦合。虽然依赖在store中也确实存在，但他们之间保持着严格的等级制度，并通过dispatcher来管理同步更新。

我们发现双向绑定会导致瀑布式的更新，一个对象发生变化会引起另一个对象的改变，并可能导致更多的更新。随着应用的增大，这些瀑布流式的更新方式会使我们很难预测用户交互可能会导致的改变。当更新只能以单一回合进行的时候，系统的可预测性也就会变得更高。

3.2.FLUX架构编程实例

1 0