接触了两种框架，这里大致做一下对比和总结
一、数据的流向
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
<template>
<div>
// 视图路由，没有的话视图看不到，也就是显示不了
HTML div相当于body 所以只能有一个最外层的div(标签)
<router-view></router-view>
</div>
</template>
<script>
JS
export default {
data() {
return {
}
},
created() {
},
methods: {
},
computed: {
},
}
</script>
<style scoped>
CSS
</style>
调用组件需要导入并声明
import Demo from './Demo'
components: {
组建名
Demo
}
然后才可以在html里使用
<template>
<div>
<Demo/>
<router-view></router-view>
</div>
</template>
- 路由配置 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;
- 页面跳转
<router-link to="路由路径"/>
动态路由传参:
<router-link :to="`/cinema/edit/${scope.row.cinemaId}`">编辑</router-link>
对应路由设置为:
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
a组件调用b组件,a就是b的父组件,b就是a的子组件
父传子 父通过子的props属性传参数
父 <Demo name="你好">
子 <script>export default {
props:[
"name"
]
}</script> 访问父传过来的数据直接可以this.name访问
子传父 子使用$emit带参调用父的自定义事件
父 <Demo @a="b"/>
methods:{b(data){console.log(data)}}
子 <button @click="submit">传数据</button>
methods: {
submit() {
// 也可以通过点击事件来触发
this.$emit("getUsername", this.username);
}
}
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标签里
- 组件的生命周期
<script>
const vm = new Vue({
el:'#app',
data:{
// 放数据
},
// vue生命周期函数 模板
// 创建完成 里面一般放一开始就要执行的，比如获取数据的函数
created() {
console.log('创建完成')
},
// 挂载
mounted() {
console.log('挂载完成')
},
methods: {
// 里面一般放要执行的函数或事件函数
},
// 更新
updated() {
},
// 销毁
destroy(){
}
})
</script>
</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
<div className="test-default-page">
相当于html，但是可以跟js写在一起,{}代表js代码，JSX语法
</div>
);
}
}
/* 把所有的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';
使用方法
<Link to=“路由组件名称”>
传参用法
<Link to={`/l路由组件名称/静态参数`}>
<Link to={`{`/l路由组件名称/${动态参数}`}`}>
对应路由设置一下
path: 'detail/:接收参数的变量名'
页面获取参数
this.props.match.params.变量名
路由传参https://www.jianshu.com/p/ad8cc02b9e6c
- 父子通讯
react组件分为两种,容器组件和视图组件
也就是父组件和子组件
react使用组件需要导入、但不需要注册
父传子 :
import Swiper from './Swiper';
父 <Swiper name="轮播图">
子获取 this.props.name
子传父
父 <Swiper name={this.getName}>
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语法
<script type="text/babel">
const person={
name:'fanyong',
age:108
};
// html和js混写
const element =
// jsx语法遇到<>代表html来编译 遇到{}代表js来编译
<h1>
<p>姓名: {person.name}</p>
<p>年龄: {person.age}</p>
</h1>;
ReactDOM.render(
element,
document.querySelector('#app')
)
</script>
更多理解可查看 https://www.jianshu.com/p/c28c07293ff5
渲染https://www.jianshu.com/p/260627daea68
https://www.jianshu.com/p/cf63d3e9459e
事件https://www.jianshu.com/p/db3df16113fa
- 组件的生命周期
<script type="text/babel">
/**
* react的生命周期分为三种
* 1.mount 挂载
* 2.update 更新
* 3.unmount 卸载
*/
class Demo extends React.Component{
constructor(props){
super(props);
}
componentWillMount(){
console.log('即将挂载')
}
componentDidMount(){
console.log('已挂载')
}
componentWillUpdate(nextProps,nextState){
console.log('将要更新')
}
componentDidUpdate(prevProps,prevState){
console.log('更新完毕');
}
// 默认每一次的修改都触发页面更新，此函数用于干预是否要更新，孕育性能优化
shouldComponentUpdate(nextProps,nextState){
}
componentWillUnmount(){
console.log('将要卸载')
}
render() {
return(
<div>生命周期</div>
)
}
}
ReactDOM.render(
<Demo />,
document.querySelector('#app')
)
</script>
- 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;// 解构
<input type="text" placeholder="请输入验证码" value={codenum} onChange={this.setcodenum} />}
通过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语法
修改数据的方法不同
