Vue React 简单对比

/	Vue	React
单文件直接引入	vue.js	react.js + react-dom.js + babel.js
虚拟DOM	√	√
虚拟DOM区域（挂载区域）	el 参数值	ReactDOM.render() 第二个参数值
数据驱动	√	√
Model数据源	初始化，定义在data:{} 或 data () { return {} }里	在state里 constructor () { this.state = {} }
数据渲染	{{ }} 插值渲染 支持表达式	JSX { } 表达式
列表渲染	v-for	JSX里生成元素集合 {this.state.arr.map((item,index)=><li key={index}>{item}</li>)}
条件渲染	v-if	{this.state.show? <h1>条件渲染</h1> : null}
动态绑定	v-bind	title={this.state.title}
数据更新	重新赋值 this.id = xxx;/ this.$set()	this.setState({id:xx}) 更新数据
指令	√	×
添加class	class / :class	className="red"
动态切换class	:class="[show? 'class1': 'class2']"	className={this.state.show ? "class1" : "class2"}
style行间	style / :style	JSX写法 style={{color:"pink"}}
ref	√	√
事件写法	@click="clickFn"	onClick={this.clickFn.bind(this)}
事件处理函数	methods: {}里	与render(){} 方法同级
生命周期钩子函数	created() mounted() 等	componentDidMount() componentDidUpdate() 等
创建组件	Vue.component全局 / components:{} 局部	function组件 / class组件
组件定义规则	1.kebab-case (短横线分隔命名) 2.PascalCase （大驼峰式）	为了区分原生标签，组件必须大写
组件特点	.vue文件 分html、js、css三块	all in js
数据流向	单向数据流	单向数据流
数据双向绑定	v-model	无 （但可以自己实现 绑定value值 + onchange事件更新value值）
监听数据变化	watch	getDerivedStateFromProps()
父组件向子组件传值	props传值 - 需要在子组件接收props:['xx']，然后就可以使用xx值	props传值 - 直接使用this.props.xx 取到值
子组件向父组件传值	子组件this.$emit触发父组件事件	子组件this.props.xx 触发父组件事件
路由	vue-router	react-router
状态管理	vuex	react-redux
修改状态	使用 mutations	使用reducer纯函数