vue&react

接触了两种框架，这里大致做一下对比和总结

一、数据的流向

1.vue-双向绑定
符号表示类似于 <=>
2.react-单向流程
抽象表示类似于环保符号

二、关键点对比

1.vue

使用的脚手架 vue-cli
https://cli.vuejs.org/zh/guide/cli-service.html
pc端elm-ui
https://element.eleme.cn/#/zh-CN
移动端 mint-ui
https://mint-ui.github.io/docs/#/zh-cn2
组件格式 xxx.vue

调用组件需要导入并声明
import Demo from './Demo'
components: {
    组建名
    Demo
  }

然后才可以在html里使用

路由配置 router
https://www.jianshu.com/p/89cb6a570eed

import Vue from 'vue';
import Router from 'vue-router';

// 使用Router
Vue.use(Router);

// 配置路由
const routerList =[
    {
        path: '/order',
        meta: {
            title: '订单',
        },
        component: () => import('@/views/order/index'),
        redirect: '/order/list',
        // 子路由
        children: [
            {
                path: 'list/:id',
              //  动态路由传参
                meta: {
                    title: "电影订单",
                },
                component: () => import('@/views/order/children/list'),
            },
            {
                path: 'xiangqing',
                meta: {
                    title: "订单详情",
                },
                component: () => import('@/views/order/children/xiangqing'),
            }
        ]
    },
]

const router = new Router({
    routes:routerList
})
export default router;

页面跳转


动态路由传参:
编辑
对应路由设置为:
path: 'edit/:id'
获取传的参数:
this.$route.params.id

通过点击事件跳转,点击事件调用this.$router.push跳转
this.$router.push('/路径')
router.push传参
this.$router.push({path:'路径',query:{参数名:参数值}})
获取参数
this.$route.query.参数名

详情请看https://www.jianshu.com/p/89cb6a570eed

父子通讯
https://www.jianshu.com/p/b012e8166c2a

a组件调用b组件,a就是b的父组件,b就是a的子组件
父传子 父通过子的props属性传参数
父 
子     访问父传过来的数据直接可以this.name访问   
子传父 子使用$emit带参调用父的自定义事件
父  
       methods:{b(data){console.log(data)}}
子 
    methods: {
    submit() {
      // 也可以通过点击事件来触发
      this.$emit("getUsername", this.username);
    }
  }

vuex
详情 https://www.jianshu.com/p/3abaa8c4c6e3
详情 https://www.jianshu.com/p/87f040e3f87b

store => vuex文件名
state => 存放状态(数据)
mutation => 定义修改数据的方法，mutation 必须是同步函数
action => 派发，用于调用mutation里的方法，通过commit 进一步处理方法
module => 分模块管理，便于管理
getters => 设置获取数据的快捷方式

请求数据(传参)
使用axios，使用方法下列链接
https://www.npmjs.com/package/axios

axios.get(url,{
               params:{
                    cinemaId:id
                }
            }).then( res => {
                console.log(res)
            }).catch( error => {
                console.log(error)
            })

promis封装 https://www.jianshu.com/p/d51a161958e5
基础使用 https://www.jianshu.com/p/fa50fbd963c3

语法

data() {
        return {
            数据放这里
        }
}
获取数据this.变量名
修改数据值this.变量名 = 值
获取直接this，修改直接赋值
命令
渲染 v-for      v-for((item,index) in list)   :key="index"
条件渲染 v-if      v-if="true"
显示 v-show        v-show="true"
v-bind  缩写 :   动态值，函数前加
v-on   事件   缩写  @
v-model    双向绑定，用于有vlaue值的标签
插值表达式   {{ data}}   通过插值表达式把值放进html标签里

组件的生命周期

2.react

使用的脚手架 rekit
npm https://www.npmjs.com/package/rekit
步骤 https://www.jianshu.com/p/7936a4945ff7
移动端用 Ant Design Mobile
https://mobile.ant.design/docs/react/introduce-cn
pc端用 Ant Design
https://mobile.ant.design/docs/react/introduce-cn
组件格式
react的组件把html和js放到了一个文件css另起一个文件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
// 组件采用继承react里的Component来创建
export class DefaultPage extends Component {
  static propTypes = {
    test: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };
  constructor(props){
    super(props);
    this.state={
      // 数据存放处
    }
  }
  componentDidMount(){
    // 页面构建好立马执行的方法 存放一开始需要执行的方法函数
  }
  render() {
    return (
        // class在react里需要改成className
      
        相当于html，但是可以跟js写在一起,{}代表js代码，JSX语法
      
    );
  }
}

/* 把所有的state添加到props */
function mapStateToProps(state) {
  return {
    test: state.test,
  };
}

/* 把所有的action添加到props */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);

路由配置
在rekit脚手架里，router、redux、子组件都是在一个大组件文件夹里进行配置的

import {
  DefaultPage,
} from './';

export default {
  path: 'test',
  name: 'Test',
  childRoutes: [
    { path: 'default-page', name: 'Default page', component: DefaultPage, isIndex: true },
  ],
};

页面跳转
react页面之间跳转使用的是Link

Link需要引入
import { Link } from 'react-router-dom';
使用方法

传参用法


对应路由设置一下
path: 'detail/:接收参数的变量名'
页面获取参数
this.props.match.params.变量名

路由传参https://www.jianshu.com/p/ad8cc02b9e6c

父子通讯
react组件分为两种,容器组件和视图组件
也就是父组件和子组件
react使用组件需要导入、但不需要注册

父传子 :
import Swiper from './Swiper';
父   
子获取    this.props.name
子传父
父    
        getName(data){
            console.log(data);
        }
子   onClick={()=>this.props.getName('你好呀')}
父获取 直接通过getName把参数给this.state里的变量储存

更多理解https://www.jianshu.com/p/066c594e0efc

redux
redux储存状态、用于储存用户状态，根据状态判断

redux 状态储存，用于储存用户状态，根据状态判断
state=>存放储存状态的变量
action =>派发任务(修改方法)
reducer=>储存修改变量的方法
react里redux是对应每个组件都有一个redux文件，最后回归到一个总的redux文件里，action也是一样。
简单理解就是一对多，一个总的redux对应多个子的redux，子的进行更改总的也会更改。

详情 https://www.jianshu.com/p/951402e7a1a4

请求数据
使用axios，使用方法下列链接
https://www.npmjs.com/package/axios

export class DefaultPage extends Component {
  constructor(props){
    super();
    this.state={
      // 这里的state相当于date
      flowlist:[]
    }
  }
  static propTypes = {
    index: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };
  // 挂载函数，页面创建后立马运行的函数
  componentDidMount(){
    this.getlist();
  }
  // 获取后台数据,并给flowlist
  async getlist(){
    let url = '/flower/getList';
    let res = await $http.get(url);
    this.setState({
      flowlist:res.flowers
    })
  }
}

语法

props 组件的所有数据
// 构造器(用于初始化类的实例) constructor
    constructor()
// 执行父类构造器 super
        super();
this.state存放数据
获取数据this.state.变量名
修改数据 this.setState(变量名:值)
bind方法     用于绑定事件的this指向constructor
定义react组件
// 定义一个react的组件 继承了React.Component自带的类的属性
        class Person extends React.Component
         // props是父组件传过来的属性
ReactDOM.render()    输出到页面，内要有jsx格式和获取节点，来输出到页面
react.min.js - React 的核心库
        react-dom.min.js - 提供与 DOM 相关的功能
        babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，
        这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。
        Babel 内嵌了对 JSX 的支持。
        通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

JSX语法

更多理解可查看 https://www.jianshu.com/p/c28c07293ff5
渲染https://www.jianshu.com/p/260627daea68
https://www.jianshu.com/p/cf63d3e9459e
事件https://www.jianshu.com/p/db3df16113fa

组件的生命周期

react带value值的标签的绑定数据

通过绑定change事件来监听vlaue的变化并且更改this.state里对应的值
constructor(props) {
    super(props);
    this.state = {
      codenum: '123456'
    }
    this.setcodenum = this.setcodenum.bind(this);//绑定this指向
  }
render() {
    let {  codenum } = this.state;// 解构
}
通过ev属性获取到当前的标签属性和值再更改this.state里的值
setcodenum(ev) {
    let target = ev.target;
    let value = target.value;
    this.setState({
      codenum: value
    })
  }

三、相同点和不同点

1.相同点

组件化思想
都有储存状态的方法 vuex和redux
都可以动态路由传参
都可以用location缓存数据

2.不同点

数据流向
语法
vue三个在一个里面些，分三层
react则是JSX语法
修改数据的方法不同