1.简介:
react也是采用MVVM的设计模式是facebook,2013开源
2.核心是:封装组件
各个组件维护自己的状态和UI,当状态改变,自动重新渲染整个组件
3.核心概念:
组件,jsx,Virtual,DOM,data,Flow(数据流)
Angular、React、Vue都是MVVM框架,都能够实现数据变化视图自动变化。但是他们三个人的原理完全不同:
Angular:脏检查,词法分析,进行隐形的视图的更新;
React:setState()等调用视图函数,配合DIFF算法和Virtual DOM让DOM的变化效率更高;
Vue : 数据劫持
4.react安装使用
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
redux
可预测的状态管理机,适合vue,react,angular。在react里面使用率最高
用npm下载用 npm i redux --save
三大原则
单一数据源
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
State 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducers。
Resucer是createStore的第一个参数,是一个函数,这个函数主要是用来生成新的state,接受两个参数一个是state,一个是action再返回newstate
Action
Action是一个对象,所有state的改变都是用户通过视图层view提交到action action是唯一改变state的途径
Action={type:””,payload:””}type是cation函数名 payload是载荷 伴随函数传的参数
Store.dispatch()是view层唯一发出action的方法 参数是一个action对象