一疮方、書寫格式

React組件分為簡單無狀態(tài)的函數(shù)組件和有狀態(tài)的類組件，任何組件只要引入后石挂，都可以在其它組件中使用博助；

2.掛載到目標(biāo)根元素
Vue:
在根組件的 el 屬性中保存元素選擇器：
new Vue({el: "#app"})

React:
通過 ReactDOM.render() 渲染：
ReactDOM.render(<App />, document.getElementById('root'));

3.模板語法
Vue:
文本元素中可以用{{}}
標(biāo)簽內(nèi)部不能用 {{}}，只能用 Vue 的以"v-"開頭的指令

React:
{}符號(hào)可以出現(xiàn)在文本元素或者標(biāo)簽內(nèi)痹愚，用于寫單個(gè)表達(dá)式富岳。

4.大小寫
Vue:
全局注冊(cè)的組件蛔糯，如果想要直接寫到 html 中，不能用駝峰寫法窖式；
this.XXX 只能使用駝峰蚁飒；
在 template 中只能使用 駝峰，組件名還是"-"萝喘；

React:
相比之下淮逻，React 就簡單很多，它只要求 組件第一個(gè)字母大寫阁簸；

二爬早、更新數(shù)據(jù)

React:
每次數(shù)據(jù)更新都要執(zhí)行this.setState();，重新渲染更新的數(shù)據(jù)饶米；

三.父子通信(父傳子)

也可以在子組件中照瘾，用 this.$parent 獲取父組件數(shù)據(jù)；

React:
只要寫到子標(biāo)簽中褪猛，子組件就可以通過 props 直接用了网杆。

四、父子通信(子傳父)

方法二：
也可以給子組件設(shè)置一個(gè) ref(ref1) 屬性关噪，在父組件中，用 this.$refs.ref1 就可以訪問子組件數(shù)據(jù)乌妙；

方法三：
通過$children 可以獲取當(dāng)前實(shí)例的直接子組件使兔，子組件有多個(gè)的時(shí)候，我們通過子組件的$options 屬性中的 name 來判斷組件
注意藤韵，$children 并不保證順序虐沥，也不是響應(yīng)式的。

React:
父組件以屬性的方式給子組件傳一個(gè)綁定(bind)自身的函數(shù)，子組件在必要的時(shí)候調(diào)用就行了

五欲险、非父子通信

具體做法：
我們可以使用Vue 實(shí)例的 provide 屬性，但我們?cè)诟讣?jí)組件的 provide 屬性中創(chuàng)建一個(gè)空實(shí)例天试，

provide(){
 return {
   eventBus: new Vue()
 }
}

所有子組件就可以通過 inject 屬性來獲取父組件的 provide 屬性中的數(shù)據(jù)

inject: ["eventBus"]

然后我們就可以在子組件中使用了：

this.eventBus

React:
也是設(shè)置一個(gè)第三方槐壳，在組件的外部設(shè)置一個(gè)監(jiān)聽事件，任何組件都可以發(fā)布請(qǐng)求喜每，第三方接收到后务唐，處理數(shù)據(jù)，重新渲染根目錄带兜。

六绍哎、路由(router)

//1.引入：
import router from 'vue-router'
Vue.use(router)
//2.創(chuàng)建一個(gè)路由

var rt = new router({
routes:[{
  path:'/xxx',  // 匹配路徑
  components: {
    yyy: HelloWorld,
    zzz: Slidebar
  }   // 多個(gè) component , key 作為 `<router-view>` 的 name 屬性，可以選擇顯示哪一個(gè)
  }]
})

//3.在根組件中加入 router 屬性
new Vue({
  el: '#app',
  router:rt,
  components: { App },
  template: '<App/>'
})

//4.確定它加載的位置
<router-view name="yyy"></router-view>  // 這個(gè)的意思是會(huì)顯示路由中 key 為 "yyy" 的組件

//5.在根組件或子組件模板中我們可以隨意使用路由：
<template>
  <router-link :to="{path: '/xxx'}">
    <p>HelloWorld</p> // 點(diǎn)擊這個(gè)內(nèi)容會(huì)路由到 path 為"/xxx" 相應(yīng)的頁面
  </router-link>
</template>

查看更多

React:

//1.引入
import { Router, Route, Link } from 'react-router'

function Tab1() {
  return <div>Tab1</div>;
}

function Tab2() {
  return <div>Tab2</div>;
}

//在`<Router>`組件中使用 `Route`鞋真，`Link` 組件就可以實(shí)現(xiàn)路由了

ReactDOM.render(
  <Router>
    <div>
      <Link to="/tab1">
        <button>tab1</button>
      </Link>
      <Link to="/tab2">
        <button>tab2</button>
      </Link>
    </div>
    <Route path="/" exact component={Tab1} />  // "/" 要加入 exact (精確)，不然路徑更改依然會(huì)顯示
    <Route path="/tab1" component={Tab1} />
    <Route path="/tab2" component={Tab2} />
  </Router>,
  rootElement
);