接觸了兩種框架令野，這里大致做一下對比和總結(jié)
一桥爽、數(shù)據(jù)的流向
1.vue-雙向綁定
符號表示類似于 <=>
2.react-單向流程
抽象表示類似于 環(huán)保符號
二杠览、關(guān)鍵點對比
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相當(dāng)于body 所以只能有一個最外層的div(標(biāo)簽)
<router-view></router-view>
</div>
</template>
<script>
JS
export default {
data() {
return {
}
},
created() {
},
methods: {
},
computed: {
},
}
</script>
<style scoped>
CSS
</style>
調(diào)用組件需要導(dǎo)入并聲明
import Demo from './Demo'
components: {
組建名
Demo
}
然后才可以在html里使用
<template>
<div>
<Demo/>
<router-view></router-view>
</div>
</template>
- 路由配置 router
http://www.reibang.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',
// 動態(tài)路由傳參
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;
- 頁面跳轉(zhuǎn)
<router-link to="路由路徑"/>
動態(tài)路由傳參:
<router-link :to="`/cinema/edit/${scope.row.cinemaId}`">編輯</router-link>
對應(yīng)路由設(shè)置為:
path: 'edit/:id'
獲取傳的參數(shù):
this.$route.params.id
通過點擊事件跳轉(zhuǎn),點擊事件調(diào)用this.$router.push跳轉(zhuǎn)
this.$router.push('/路徑')
router.push傳參
this.$router.push({path:'路徑',query:{參數(shù)名:參數(shù)值}})
獲取參數(shù)
this.$route.query.參數(shù)名
詳情請看http://www.reibang.com/p/89cb6a570eed
a組件調(diào)用b組件,a就是b的父組件,b就是a的子組件
父傳子 父通過子的props屬性傳參數(shù)
父 <Demo name="你好">
子 <script>export default {
props:[
"name"
]
}</script> 訪問父傳過來的數(shù)據(jù)直接可以this.name訪問
子傳父 子使用$emit帶參調(diào)用父的自定義事件
父 <Demo @a="b"/>
methods:{b(data){console.log(data)}}
子 <button @click="submit">傳數(shù)據(jù)</button>
methods: {
submit() {
// 也可以通過點擊事件來觸發(fā)
this.$emit("getUsername", this.username);
}
}
store => vuex文件名
state => 存放狀態(tài)(數(shù)據(jù))
mutation => 定義修改數(shù)據(jù)的方法董济，mutation 必須是同步函數(shù)
action => 派發(fā)，用于調(diào)用mutation里的方法要门，通過commit 進(jìn)一步處理方法
module => 分模塊管理虏肾，便于管理
getters => 設(shè)置獲取數(shù)據(jù)的快捷方式
- 請求數(shù)據(jù)(傳參)
使用axios，使用方法下列鏈接
https://www.npmjs.com/package/axios
axios.get(url,{
params:{
cinemaId:id
}
}).then( res => {
console.log(res)
}).catch( error => {
console.log(error)
})
promis封裝 http://www.reibang.com/p/d51a161958e5
基礎(chǔ)使用 http://www.reibang.com/p/fa50fbd963c3
- 語法
data() {
return {
數(shù)據(jù)放這里
}
}
獲取數(shù)據(jù)this.變量名
修改數(shù)據(jù)值this.變量名 = 值
獲取直接this欢搜，修改直接賦值
命令
渲染 v-for v-for((item,index) in list) :key="index"
條件渲染 v-if v-if="true"
顯示 v-show v-show="true"
v-bind 縮寫 : 動態(tài)值封豪，函數(shù)前加
v-on 事件 縮寫 @
v-model 雙向綁定，用于有vlaue值的標(biāo)簽
插值表達(dá)式 {{ data}} 通過插值表達(dá)式把值放進(jìn)html標(biāo)簽里
- 組件的生命周期
<script>
const vm = new Vue({
el:'#app',
data:{
// 放數(shù)據(jù)
},
// vue生命周期函數(shù) 模板
// 創(chuàng)建完成 里面一般放一開始就要執(zhí)行的炒瘟，比如獲取數(shù)據(jù)的函數(shù)
created() {
console.log('創(chuàng)建完成')
},
// 掛載
mounted() {
console.log('掛載完成')
},
methods: {
// 里面一般放要執(zhí)行的函數(shù)或事件函數(shù)
},
// 更新
updated() {
},
// 銷毀
destroy(){
}
})
</script>
</html>
2.react
- 使用的腳手架 rekit
npm https://www.npmjs.com/package/rekit
步驟 http://www.reibang.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來創(chuàng)建
export class DefaultPage extends Component {
static propTypes = {
test: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
constructor(props){
super(props);
this.state={
// 數(shù)據(jù)存放處
}
}
componentDidMount(){
// 頁面構(gòu)建好立馬執(zhí)行的方法 存放一開始需要執(zhí)行的方法函數(shù)
}
render() {
return (
// class在react里需要改成className
<div className="test-default-page">
相當(dāng)于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粘都、子組件都是在一個大組件文件夾里進(jìn)行配置的
import {
DefaultPage,
} from './';
export default {
path: 'test',
name: 'Test',
childRoutes: [
{ path: 'default-page', name: 'Default page', component: DefaultPage, isIndex: true },
],
};
- 頁面跳轉(zhuǎn)
react頁面之間跳轉(zhuǎn)使用的是Link
Link需要引入
import { Link } from 'react-router-dom';
使用方法
<Link to=“路由組件名稱”>
傳參用法
<Link to={`/l路由組件名稱/靜態(tài)參數(shù)`}>
<Link to={`{`/l路由組件名稱/${動態(tài)參數(shù)}`}`}>
對應(yīng)路由設(shè)置一下
path: 'detail/:接收參數(shù)的變量名'
頁面獲取參數(shù)
this.props.match.params.變量名
路由傳參http://www.reibang.com/p/ad8cc02b9e6c
- 父子通訊
react組件分為兩種,容器組件和視圖組件
也就是父組件和子組件
react使用組件需要導(dǎo)入、但不需要注冊
父傳子 :
import Swiper from './Swiper';
父 <Swiper name="輪播圖">
子獲取 this.props.name
子傳父
父 <Swiper name={this.getName}>
getName(data){
console.log(data);
}
子 onClick={()=>this.props.getName('你好呀')}
父獲取 直接通過getName把參數(shù)給this.state里的變量儲存
更多理解http://www.reibang.com/p/066c594e0efc
- redux
redux儲存狀態(tài)刷袍、用于儲存用戶狀態(tài)翩隧，根據(jù)狀態(tài)判斷
redux 狀態(tài)儲存，用于儲存用戶狀態(tài)呻纹，根據(jù)狀態(tài)判斷
state=>存放儲存狀態(tài)的變量
action =>派發(fā)任務(wù)(修改方法)
reducer=>儲存修改變量的方法
react里redux是對應(yīng)每個組件都有一個redux文件堆生，最后回歸到一個總的redux文件里，action也是一樣雷酪。
簡單理解就是一對多淑仆，一個總的redux對應(yīng)多個子的redux，子的進(jìn)行更改總的也會更改哥力。
詳情 http://www.reibang.com/p/951402e7a1a4
- 請求數(shù)據(jù)
使用axios糯景，使用方法下列鏈接
https://www.npmjs.com/package/axios
export class DefaultPage extends Component {
constructor(props){
super();
this.state={
// 這里的state相當(dāng)于date
flowlist:[]
}
}
static propTypes = {
index: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
// 掛載函數(shù)，頁面創(chuàng)建后立馬運(yùn)行的函數(shù)
componentDidMount(){
this.getlist();
}
// 獲取后臺數(shù)據(jù),并給flowlist
async getlist(){
let url = '/flower/getList';
let res = await $http.get(url);
this.setState({
flowlist:res.flowers
})
}
}
- 語法
props 組件的所有數(shù)據(jù)
// 構(gòu)造器(用于初始化類的實例) constructor
constructor()
// 執(zhí)行父類構(gòu)造器 super
super();
this.state存放數(shù)據(jù)
獲取數(shù)據(jù)this.state.變量名
修改數(shù)據(jù) this.setState(變量名:值)
bind方法 用于綁定事件的this指向constructor
定義react組件
// 定義一個react的組件 繼承了React.Component自帶的類的屬性
class Person extends React.Component
// props是父組件傳過來的屬性
ReactDOM.render() 輸出到頁面省骂，內(nèi)要有jsx格式和獲取節(jié)點蟀淮，來輸出到頁面
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關(guān)的功能
babel.min.js - Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，
這樣我們就能在目前不支持 ES6 瀏覽器上執(zhí)行 React 代碼钞澳。
Babel 內(nèi)嵌了對 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>
更多理解可查看 http://www.reibang.com/p/c28c07293ff5
渲染http://www.reibang.com/p/260627daea68
http://www.reibang.com/p/cf63d3e9459e
事件http://www.reibang.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('更新完畢');
}
// 默認(rèn)每一次的修改都觸發(fā)頁面更新轧粟，此函數(shù)用于干預(yù)是否要更新策治，孕育性能優(yōu)化
shouldComponentUpdate(nextProps,nextState){
}
componentWillUnmount(){
console.log('將要卸載')
}
render() {
return(
<div>生命周期</div>
)
}
}
ReactDOM.render(
<Demo />,
document.querySelector('#app')
)
</script>
- react帶value值的標(biāo)簽的綁定數(shù)據(jù)
通過綁定change事件來監(jiān)聽vlaue的變化并且更改this.state里對應(yīng)的值
constructor(props) {
super(props);
this.state = {
codenum: '123456'
}
this.setcodenum = this.setcodenum.bind(this);//綁定this指向
}
render() {
let { codenum } = this.state;// 解構(gòu)
<input type="text" placeholder="請輸入驗證碼" value={codenum} onChange={this.setcodenum} />}
通過ev屬性獲取到當(dāng)前的標(biāo)簽屬性和值再更改this.state里的值
setcodenum(ev) {
let target = ev.target;
let value = target.value;
this.setState({
codenum: value
})
}
三、相同點和不同點
1.相同點
- 組件化思想
- 都有儲存狀態(tài)的方法 vuex和redux
- 都可以動態(tài)路由傳參
- 都可以用location緩存數(shù)據(jù)
2.不同點
- 數(shù)據(jù)流向
- 語法
vue三個在一個里面些兰吟，分三層
react則是JSX語法
修改數(shù)據(jù)的方法不同
