REACT学习笔记

目录

• 1.REACT安装
  
  • 1.0.安装node.js
  • 1.1.安装NPM包管理工具
  • 1.2.使用NPM安装REACT和相关工具
  • 1.3.相关工具的使用简介
• 2.REACT基础知识
• 3.FLUX框架入门
  
  • 3.0.FLUX框架简介
  • 3.1.FLUX架构和数据流
  • 3.2.FLUX架构编程实例

1.REACT安装

需要的工具：

• nodejs环境
• npm/cnpm包管理工具

1.0.安装node.js

请自行百度，附上node.js官网。

1.1.安装NPM包管理工具

推荐使用cnpm，cnpm是npm的镜像，速度比npm更快。安装好工具之后，新建一个文件夹作为你的项目根目录，从控制台打开该目录,输入：

mengmengxingxingdeMacBook-Air:demo Meng$ cnpm init 

按提示，一步步来完成项目文件的配置，没有的可以不写，直接enter,这样初始化时会创建默认的文件。创建成功后会在该目录中生成package.json文件，例如：

{
  "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 react
cnpm insatll --save react-dom
cnpm insatll --save jest-cli
cnpm insatll --save gulp
cnpm insatll --save browserify
cnpm insatll --save reactify
cnpm 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架构编程实例