React优势
- 组件化开发 社区活跃 提交代码可复用性 维护性
- 虚拟DOM（diff 算法） 提高页面渲染速度
- 生命周期 对数据的控制 使开发者更专注业务开发
- 单向数据流
总结:
React是一个前端框架 使前端开发更细致化
1.路由层Route
程序跑起来 首先寻找路由组件 根据路由组件找到对应的页面组件 页面组件找到对应的UI组件 最后进行渲染
2.数据层state
3.虚拟dom 减少dom的操作
让代码更具有维护性 而且国内antd 让开发后台管理系统变得更加容易
组件化开发
路由组件 页面组件 UI组件 提交代码维护性 以及可读性
生命周期
单向数据流
数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变了，React会递归的向下遍历整棵组件树，重新渲染所有使用这个属性的组件。
##React中Virtual-DOM原理 diff算法
第一次渲染页面 同时保存一份当前Dom-Tree的虚拟DOM 然后第二次渲染时 对比虚拟DOM 只渲染改变的DOM结构
更多对Virtual-DOM介绍访问https://www.zhihu.com/question/29504639/answer/73607810
真实DOM属性
真实DOM是很慢的。如果我们把一个简单的div元素的属性都打印出来，你会看到:
而这仅仅是第一层。真正的 DOM 元素非常庞大，这是因为标准就是这么设计的。而且操作它们的时候你要小心翼翼，轻微的触碰可能就会导致页面重排，这可是杀死性能的罪魁祸首。
虚拟DOM类似以下结构:
相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来：
var element = {
tagName: 'ul', // 节点标签名
props: { // DOM的属性，用一个对象存储键值对
id: 'list'
},
children: [ // 该节点的子节点
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
]
}
然后虚拟DOM进行对比 在没有进行render()之前 合并对比所有DOM的最小操作 最后渲染真实的DOM 最小的操作真实的DOM 因为相对来说直接操作真实的DOM成本很高
还有一个问题
react 在每个组件内部有一个私有的state状态机的东西 专门负责管理数据 这样数据和UI就解耦了 不像以前更新了DOM可能就混乱 难以管理
最终解决的就是维护状态，更新视图
比较易懂的例子
比如说，现在你的list是这样，
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
你想把它变成这样
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
传统的方式: 移除4个li元素 重新添加5个li元素 一共操作了9次dom
然而react
1.首先对应的虚拟Dom中对应的每个li元素生成了一个唯一的id
2.在diff对比虚拟dom 发现前4个li元素的DOM结构并没有变化 变化的只是里面的内容
然后新增一个"<li>10</li>"元素 一共五次操作
对比
传统的方式中
一共操作了9次DOM 这9次DOM包括了对DOM结构的操作(ps:移除 新增)
以及DOM里面的内容的操作
而React中
只有一次是对DOM结构和DOM里内容的操作 然而其他4次都是对Dom里的内容进行的操作
这样一对比
React操作DOM的次数最少 并且React每次都是最小单元的最最最细致的在操作和管理DOM的结构
真的强大
Redux为了解决什么问题?
Redux解决的是UI组件与数据state的解耦 组件只负责渲染 redux负责管理状态数据state
Redux 就是为了解决state 在什么时候变化 由于什么原因变化(action) 如何变化(定义返回新的state方法)。让我们管理state更改清晰 也更加易维护
dva的工作流程图和redux类似 画的还挺通俗易懂的 哈哈 借过来用一下
redux的出现,让组件和数据解耦,组件只负责渲染,state状态数据拿给redux管理起来
没有redux之前组件和数据(state)是耦合在一起的,这样在维护组件的时候要同时维护state数据 这样效率很低。
##具体怎么解决的
redux
Provider 管理Store数据
Store 管理state数据
reducer(action dispatch) 根据dispatch(action)改变state state的变化
thunk 让Stroe.dispatch具有接收函数的能力 方便异步处理
import { createStore, applyMiddleware, compose } from 'redux' //初始化redux
import {
BrowserRouter,
Route,
Redirect,
Switch
} from 'react-router-dom' //管理路由
import { connect } from 'react-redux' //connect UI组件连接redux（数据管理者）
babel-plugin-transform-decorators-legacy//@connect 以装饰器的形式 写connect