個(gè)人認(rèn)為，react和vue的業(yè)務(wù)邏輯是差不多，vue在react上封裝了更簡潔的方法，使用起來更加的便捷，如：提供了便捷的指令（v-for,v-if,v-model），還提供了更多的屬性（computed,watch），我還是比較喜歡用react的，更接近js原生，更容易于理解它。
1、作者
react：Facebook（團(tuán)隊(duì)）? ? ? ? vue：尤雨溪（個(gè)人）
2、生命周期(列出常用的)
react：
componentWillMount：組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state。下一個(gè)版本可能會(huì)被廢棄。
render：react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹都在此進(jìn)行。此時(shí)就不能更改state了。
componentDidMount:組件渲染之后調(diào)用，只調(diào)用一次。
componentWillReceiveProps：組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。
componentWillUnmount：組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽和定時(shí)器需要在此時(shí)清除。
componentWillUndate:組件更新結(jié)束之前執(zhí)行，在初始化render時(shí)不執(zhí)行。
componentDidUndate:組件更新結(jié)束之后執(zhí)行，在初始化render時(shí)不執(zhí)行
注意：componentDidMount 里面 setState 導(dǎo)致組件更新，組件更新后會(huì)執(zhí)行 componentDidUpdate，此時(shí)你又在 componentDidUpdate 里面 setState 又會(huì)導(dǎo)致組件更新，造成成死循環(huán)了，如果要避免死循環(huán)，需要謹(jǐn)慎的在 componentDidUpdate 里面使用 setState
vue:
４、模板和ＪＳＸ
react：
HTML 語言直接寫在 JavaScript 語言之中，不加任何引號(hào)，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫
vue：
Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。
5、狀態(tài)管理機(jī)制
react：redux+react-redux+redux-thunk+prop-types
Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。下圖是從阮一峰老師博客上截下來的圖，更簡潔的方便的說明了哪些地方需要用到redux：
實(shí)例：
一、定義一個(gè)reducer（純函數(shù)），主要是用來接受state(數(shù)據(jù))和action(發(fā)送過來的數(shù)據(jù))；監(jiān)聽action.type，重新計(jì)算返回state值；
二、創(chuàng)建store(createStore)，異步處理的時(shí)候，可以使用中間件，讓dispatch發(fā)送數(shù)據(jù)的時(shí)候，不是發(fā)送對(duì)象，而是發(fā)送一個(gè)純函數(shù)，純函數(shù)接受dispatch和getState兩個(gè)值。讓代碼可以提取出來，更優(yōu)雅，更規(guī)范。store.subscribe當(dāng)狀態(tài)改變時(shí)，觸發(fā)函數(shù)，這里是狀態(tài)改變的時(shí)候，重新渲染根組件。Provider提供一個(gè)數(shù)據(jù)傳遞，所有的子組件都可以接收到store；(原理：是通過context)；
三、dispatch發(fā)送action，同步可以直接發(fā)送一個(gè)action對(duì)象，異步通過中間件發(fā)送一個(gè)函數(shù)。通過prop-types模塊，定義傳值store的類型。
react-redux
它是redux附屬功能，其中最常用的:provider和connect。
vue：
之前有寫過關(guān)于vue狀態(tài)管理模塊vuex：vuex狀態(tài)管理
6、組件傳值
react:
父到子，父組件自定義屬性，子通過props來獲取父的屬性值
子到父，在父組件綁定callbackParent={this.onChildChanged}，在子組件利用this.props.callbackParent(newState),觸發(fā)了父級(jí)的的this.onChildChanged方法，進(jìn)而將子組件的數(shù)據(jù)（newState）傳遞到了父組件。
這樣做其實(shí)是依賴 props 來傳遞事件的引用，并通過回調(diào)的方式來實(shí)現(xiàn)
onChildChanged: function (newState) {
? ? this.setState({
? ? ? checked: newState
? ? });
? },
vue:
1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實(shí)現(xiàn)
父組件：
<parent>
? ? <child :child-msg="msg"></child>? //這里必須要用 - 代替駝峰
</parent>
data(){
? ? return {
? ? ? ? msg: [1,2,3]
? ? };
}
子組件通過props來接收數(shù)據(jù):
props: ['childMsg']
2.子組件與父組件通信
子組件:
<template>
? ? <div @click="testClick"></div>
</template>
methods: {
? ? testClick() {
? ? ? ? this.$emit('test','123'); //主動(dòng)觸發(fā)test方法，'123'為向父組件傳遞的數(shù)據(jù)
? ? }
}
父組件:
<div>
? ? <child @test="change" :msg="msg"></child>? //監(jiān)聽子組件觸發(fā)的test事件,然后調(diào)用change方法
</div>
methods: {
? ? change(msg) {
? ? ? ? this.msg = msg;? // msg: 123
? ? }
}
