什么是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 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】
• vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定
• 双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；
• 组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告

• 安装create-react-app

npm isntall -g create-react-app

• 查看版本

create-react-app --version

• 创建项目目录
  
• 安装完成之后（红线标识的是运行的时候的默认配置）
  
• 运行yarn start
  
  • 自动运行浏览器，打开localhost:3000页面
    

打开项目代码，其中package.json中script标签的eject命令是默认安装webpack等一些基础的配置

会增加一个scripts文件夹和一个config文件夹存放一些配置文件

• 首先安装nginx，npm，node，配置项目目录，配置nginx代理
• clone代码到项目目录

git clone https://houchaowei:**@gitee.com/houchaowei/flash.git

• 解析一个二级域名，没有配置nginx代理的时候，访问不到的项目
  
• nginx配置
  
• 项目目录下执行npm install & npm run build
  

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