React 和 Vue

安装React脚手架

• 首先得全局安装 yarn global create-react-app 或者 npm i react-app -g

• 这几个都可以创建react项目，喜欢哪个用哪个：npx create-react-app my-app、 npm init react-app my-app、 yarn create react-app my-app

• 使用npm eject 将node_modules中的依赖配置移到外部的package.json。

• 可以通过创建环境变量的形式修改配置，也可以直接在config文件里面赋值或修改。

• 根目录下创建.env文件，可写入环境变量

  
  image.png

• 最终 npm start 启动项目。。

安装Vue脚手架

• 同样全局安装下脚手架工具 npm install -g @vue/cli、 yarn global add @vue/cli

异同

两者都用了虚拟dom和diff算法，在性能上相差不大。

Component：

Vue：以.Vue为扩展名，分为<template />、<script />、<style />三个部分，在template中编写html，script标签中编写逻辑，style中编写样式，一个.Vue文件即为一个组件。
React：利用独有的jsx语法，在类中以render方法返回jsx渲染到页面，一个Class即为一个组件。

Props：

Vue：父组件上利用指令在标签绑定参数，子组件只需要在Vue对象中写一个props来接收即可。
React：依然利用jsx语法在标签上绑定参数，子组件用this.props即可接收。

State：

Vue： 直接修改data的值就能重新渲染页面。
React： 需使用setState方法来重新渲染修改部分。

Router：

两者没有太大的区别，但是react可以使用jsx语法，以标签的形式来编写路由，不用像传统的路由那样数组包对象。

Redux 和 Vuex：

这是两家开发出的独立的东西，不局限于vue和react，用法不同，但最终效果是一样的。