React
React的数据监听变化的原理是通过进行对虚拟Dom(对象)树和真实的Dom树来引入比较进行局部的渲染。(需要使用PureComponent/shouldComponent来优化。否则
可能导致大量不必要的VDOM的重新渲染)
Vue
vue的数据监听变化的原理是通过getter/setter以及一些函数的劫持，能够精确的知道数据的变化，不需要特别的优化能到很好的性能
React 和 Vue设计理念不同, React是按照MAC框架中V这一层，它更关注的是如何根据状态创建可服用的UI组件，如何根据组件创建可服用的UI。Vue则是按照MVVM框架设计。M表示数据层，V表示页面显示层，VM则是让数据层驱动影响页面的变化，页面层的改变影响数据的变化，
ReduX 和 VueX
在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。
在 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。
从实现原理上来说，最大的区别是两点：
Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改。
Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
React特点:
1.声明式设计模式(声明式编程声明式编程表明想要实现什么目的，应该做什么，但是不指定具体怎么做。声明式点一杯酒，只要告诉服务员：我要一杯酒即可；)React中的声明式示例：带有标记的地图
const map = new Map.map(document.getElementById('map'), {
zoom: 4,
center: {lat,lng}
});
const marker = new Map.marker({
position: {lat, lng},
title: 'Hello Marker'
});
marker.setMap(map);这是在JavaScript中命令式创建地图、创建标记以及在地图上添加标记的步骤；
React组件中显示地图的方式：
<Map zoom={4} center={lat, lng}>
<Marker position={lat, lng} title={'Hello Marker'}/></Map>声明式编程方式使得React组件很容易使用，最终的代码简单易于维护。
2.组件
- 为程序编写独立的模块化组件,可以在其他组件或代码中来复用。从来实现更好的维护，减少代码量。提高效率。
- 以下是一个倒计时组件
import React, {Component} from 'react'
export default class countDown extends Component {
constructor(props) {
super(props);
this.state = {
day: 0,
hour: 0,
minute: 0,
second: 0
}
}
componentDidMount() {
if(this.props.endTime){
this.countFun(this.props.endTime);
}
}
//组件卸载取消倒计时
componentWillUnmount(){
clearInterval(this.timer);
}
countFun = (time) => {
this.timer = setInterval(() => {
//防止倒计时出现负数
if (time > 1000) {
time -= 1000;
let day = Math.floor((time / 1000 / 3600) / 24);
let hour = Math.floor((time / 1000 / 3600) % 24);
let minute = Math.floor((time / 1000 / 60) % 60);
let second = Math.floor(time / 1000 % 60);
this.setState({
day:day,
hour:hour < 10 ? "0" + hour : hour,
minute:minute < 10 ? "0" + minute : minute,
second:second < 10 ? "0" + second : second
})
} else {
clearInterval(this.timer);
//倒计时结束时触发父组件的方法
//this.props.timeEnd();
}
}, 1000);
};
render() {
return (
<span style={{ fontSize: '12px', color: '#4C5FC1' }} >{this.state.day}天{this.state.hour}小时{this.state.minute}分钟{this.state.second}秒</span>
)
}
}// 之后多个页面需要时 只需引入即可, 从而减少不必要重复代码
import countDown form './countDown';
<countDown endTime={****}/>3.单向流数据
- 简单的单向数据流（unidirectional data flow）是指用户访问View，View发出用户交互的Action，在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动，便于维护并且可以预测。
4.高效的性能
- react采用了虚拟Dom，所谓虚拟Dom实际上其实就是在js和真实Dom中间加了一个缓存，利用dom diff算法避免了所有的没必要的操作
