以小見大，todoList項目對比vue與react區別

前言：經過一個簡單的todoList項目，從基礎項目結構，數據操做，事件，父子組件傳參等方面對比下vue與react項目，增強記憶 兩個項目完整代碼參見：github.com/MrXuxu/todo…

1. 項目開始

• react

react項目 從index.js 文件開始

1. 引入react 
2. 引入ReactDom 虛擬Dom
3. 引入 App.js
4. 將 App.js 掛載到 id 爲 root 的根元素上 
複製代碼

• vue

vue項目入口相對簡單，只有3步

1. 引入 Vue
2. 引入 App.vue
3. 將 App.vue 掛載到 id 爲 app 的根元素
複製代碼

2. 組件寫法不一樣

• vue項目定義了App.vue文件，一個.vue文件至關於一個組件
• react中依然是.js文件，不一樣之處在於其中用的是jsx語法

1. vue 和 react 引入組件，vue 須要額外聲明，而 react 能夠直接使用
複製代碼

3. 事件使用方式以及 this

• vue

1. 在 methods 中定義事件
methods: {
    deleteItem(index) {
      this.list.splice(index, 1)
    }
}
2. 在元素上使用
<button @click="handleBtnClick">肯定</button>
複製代碼

• react

1. react 中定義事件，事件是與 constructor, render 平級的且無需逗號隔開
2. 在元素上使用須要注意綁定 this
<button onClick={this.handleClick.bind(this)}>添加</button>
3. 事件名寫法 @click 與 onClick 的區別
4. 變量寫法 :index="item", index={item} 的區別
複製代碼

4. 雙向數據綁定

• vue

vue 中雙向數據綁定只需 v-model 便可，很是方便
複製代碼

• react

<input
    id="input"
    value={this.state.value}
    onChange={this.handleChange.bind(this)}
 />
1. input value 屬性綁定 this.state.value 值
2. 設置 onChange 事件，監聽 input 框值的改變
3. 聲明 onChange 事件，當觸發的時候將 this.state.value的值替換爲 input 輸入框的值
handleChange(e) {
    this.setState({
      value: e.target.value
    })
}
4. 補充一點，vue 能夠直接經過 this.value = ''直接操做 data 中的數據，而 react 須要使用 this.setState 方法替換
複製代碼

5. for 循環元素

• vue

<TodoItem 
  v-for="(item, index) in list" 
  :key="index" 
/>
經過 v-for 遍歷，:key 綁定 key 值
複製代碼

• react

{
  this.state.list.map((item, index) => {
    return (
      <TodoItem key={index} />
    )
  })
}
相對更復雜，用 {} 包裹遍歷，key 值變量也用 {} 包裹
複製代碼

5. 父子組件

• vue

<TodoItem 
  v-for="(item, index) in list" 
  :key="index" 
  :index="index"
  :content="item"
  @del="deleteItem(index)"
/>
複製代碼

• react

<TodoItem 
    key={index} 
    content={item} 
    handleDelete={this.handleDel.bind(this, index)} 
/>
複製代碼

1. 傳值

vue 傳值經過 v-bind 或者 :表示變量，而後在子組件內 props 中聲明類型
react 傳值須要給變量加 {}，不需聲明，可經過 this.props.直接調用
複製代碼

2. 觸發事件

vue 觸發父組件事件經過 this.$emit觸發組件綁定方法
react 經過 this.props.handleDelete() 觸發，事件和數據都在 props 中
複製代碼

6. class 與 className

vue 可保留 class 命名方式
react 爲了不衝突，class 改成 className
複製代碼

7. v-html 與 dangerouslySetInnerHTML

vue 中渲染帶標籤的內容如 <h1>1</1> 用過 v-html 綁定
react 經過 dangerouslySetInnerHTML 綁定
<li 
  dangerouslySetInnerHTML={{__html: item}}
>
</li>
複製代碼