导语
什么是React？Vue跟React相比的区别是哪些？为什么大厂都会选择React？
区别
设计模式
React采用的是MVC模式（严格的view层）；Vue采用的是MVVM模式； 组件写法不同；
react主张jsx+inline style,也就是讲HTML、css写到js中，一切皆js,vue则是webpack+Vue-loader的单文件组件格式，即HTML、css、js组成一个文件形成.vue文件 数据绑定
两者都是单向数据流，但是Vue可以进行双向数据绑定，React也可以进行双向数据绑定，但是绑定的原理有些区别，React是通过setState与View层进行双向数据绑定达到实时更新变化 Vitual Dom 不一样；
Vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而react每当应用的状态被改变时，全部组件都会被渲染，所以react需要shouldComponentUpdate这个生命周期函数方法来进行控制
注： 关于vue的数据双向绑定和单向数据流
Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告
React
搭建React
安装create-react-app
npm isntall -g create-react-app
查看版本
create-react-app --version
创建项目目录 安装完成之后（红线标识的是运行的时候的默认配置） 运行yarn start
自动运行浏览器，打开localhost:3000页面
运行默认配置
打开项目代码，其中package.json中script标签的eject命令是默认安装webpack等一些基础的配置
会增加一个scripts文件夹和一个config文件夹存放一些配置文件
Config for yourself
项目目录地址： 码云：https://gitee.com/houchaowei/flash.git
按照vue的开发习惯配置了一些简单的目录没有加redux，加了MOBX
服务器端项目的部署
首先安装nginx，npm，node，配置项目目录，配置nginx代理clone代码到项目目录
git clone https://houchaowei:**@gitee.com/houchaowei/flash.git
解析一个二级域名，没有配置nginx代理的时候，访问不到的项目 nginx配置 项目目录下执行npm install & npm run build
React示例：
Demo
index.js
/**
* index.js
*/
import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import {
Button,
InputItem
} from 'antd-mobile'
@inject('store')
@observer
class Index extends Component {
constructor(props) {
super(props)
this.state = {
}
}
changeName = () => {
this.props.store.setName('小吴')
}
render() {
return (
<div>
<InputItem value={this.props.store.name} type='primary'>姓名</InputItem>
<Button onClick={this.changeName}>修改名字</Button>
</div>
)
}
}
export default Index
store.js
/**
* store.js
*/
import {observable, action} from "mobx";
class CommonState {
@observable name = '小红';
@action setName (name) {
this.name = name;
}
}
export default CommonState
