這篇文章主要講解了“vue與react創(chuàng)建APP的差別是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue與react創(chuàng)建APP的差別是什么”吧！

新?lián)峋W(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

1. 目標(biāo)

我將會構(gòu)建一個標(biāo)準(zhǔn)的待辦事項應(yīng)用程序，允許用戶添加和刪除列表中的項目。這兩個應(yīng)用程序都使用默認(rèn)的 CLI（command-line interface，命令行界面） 構(gòu)建，React 使用 create-react-app，Vue 使用 vue-cli。

兩個應(yīng)用程序的外觀如下：

兩個應(yīng)用程序的 CSS 代碼幾乎一樣，但這些代碼的位置存在差異?？紤]到這一點，我們來看看這兩個應(yīng)用程序的文件結(jié)構(gòu)：

你會發(fā)現(xiàn)它們的結(jié)構(gòu)幾乎完全相同。唯一的區(qū)別在于 React App 擁有三個 CSS 文件，而 Vue App 中沒有 CSS 文件。這是因為 React 的 create-react-app 組件需要一個附帶文件來保存其樣式，而 Vue CLI 采用全包方法，其樣式在實際組件文件中聲明。

在這里小編建了一個前端學(xué)習(xí)交流扣扣群：132667127，我自己整理的最新的前端資料和高級開發(fā)教程，如果有想需要的，可以加群一起學(xué)習(xí)交流

兩種不同的策略得到的結(jié)果是一樣的，相信開發(fā)者很快能夠掌握這兩種不同的策略。開發(fā)者可以根據(jù)自己的偏好做出選擇，你會聽到開發(fā)社區(qū)關(guān)于如何構(gòu)建 CSS 的大量討論。以上，我們遵循兩個 CLI 列出了代碼結(jié)構(gòu)。

在我們進一步討論之前，先快速看一下典型的 Vue 和 React 組件的外觀：

左側(cè)為 Vue，右側(cè)為 React

現(xiàn)在讓我們正式開始，深入其中的細節(jié)！

2. 如何修改數(shù)據(jù)

首先，我們需要明白“修改數(shù)據(jù)”的意思是什么。它聽起來有些學(xué)術(shù)，但實際上很簡單，就是把我們已經(jīng)存儲好的數(shù)據(jù)進行更改。比如，如果我們想把一個人的名字變量從“Jhon”改為“Mark”，我們就需要執(zhí)行“修改數(shù)據(jù)”的操作。在這一點上，React 和 Vue 的處理方式有所區(qū)別。Vue 本質(zhì)上會創(chuàng)建一個數(shù)據(jù)對象，其中的數(shù)據(jù)可以自由更改；React 則創(chuàng)建一個狀態(tài)對象，更改數(shù)據(jù)需要一些額外的操作。React 之所以需要額外的操作有著自己的理由，稍后我會深入介紹。在此之前，我們先看看 Vue 中的數(shù)據(jù)對象和 React 中的狀態(tài)對象：

Vue 數(shù)據(jù)對象

React 狀態(tài)對象

從圖中可以看出，我們傳入了相同的數(shù)據(jù)，但它們的標(biāo)記方法不同。因此，將初始數(shù)據(jù)傳遞到組件的方式非常相似。但正如我們提到的那樣，在兩個框架中更改數(shù)據(jù)的方式有所不同。

假設(shè)我們有一個名為 name: ‘Sunil’ 的數(shù)據(jù)元素。

在 Vue 中，我們通過調(diào)用 this.name 來引用它。我們也可以通過調(diào)用 this.name ='John' 來更新它。這樣一來，名字就被成功改為了 “Jhon”。

在 React 中，我們通過調(diào)用 this.state.name 來引用同一段數(shù)據(jù)?，F(xiàn)在關(guān)鍵的區(qū)別在于，我們不能簡單地寫成 this.state.name ='John'，因為 React 有限制機制，它會阻止這種簡單的修改方式。在 React 中，我們需要這樣寫：this.setState({name：'John'})。

雖然這基本上與我們在 Vue 中實現(xiàn)的結(jié)果一樣，但是 React 的操作更為繁瑣，那是因為 Vue 在每次更新數(shù)據(jù)時默認(rèn)組合了自己的 setState 版本。 簡單來說就是，React 需要 setState，然后更新其內(nèi)部數(shù)據(jù)，而對于 Vue 來說，當(dāng)你更新數(shù)據(jù)對象的值時它就默認(rèn)了你的更改意圖。 那么為什么 React 沒有進行簡化，為什么需要 setState 呢？ Revanth Kumar 對此做出了解釋：

“這是因為 React 希望在狀態(tài)發(fā)生變化時重新運行某些生命周期 hook，比如 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。當(dāng)你調(diào)用 setState 函數(shù)時，它知道狀態(tài)已經(jīng)改變。如果你直接改變狀態(tài)，React 將需要做更多工作來跟蹤更改以及運行生命周期 hook 等等。所以為了簡單起見，React 使用 setState。"現(xiàn)在我們知道如何更改數(shù)據(jù)了，接下來看看如何在待辦應(yīng)用程序中添加新的事項。

3. 添加新的待辦事項

React 的實現(xiàn)方法

createNewToDoItem = () => {
 this.setState( ({ list, todo }) => ({
 list: [
 ...list,
 {
 todo
 }
 ],
 todo: ''
 })
 );
};

在 React 中，我們的輸入字段有一個名為 value 的屬性。這個 value 通過使用幾個函數(shù)自動更新，這些函數(shù)綁定在一起以創(chuàng)建雙向綁定。我們通過在輸入字段上附加一個 onChange 事件監(jiān)聽器來創(chuàng)建這種形式的雙向綁定?？纯创a，一探究竟：

只要輸入字段的值發(fā)生更改，handleInput 函數(shù)就會運行。它通過將狀態(tài)對象設(shè)置為輸入字段中的任何內(nèi)容來更新狀態(tài)對象內(nèi)的 todo。handleInput 函數(shù)如下：

handleInput = e => {
 this.setState({
 todo: e.target.value
 });
};

現(xiàn)在，只要用戶按下頁面上的 + 按鈕添加新項目，createNewToDoItem 函數(shù)就會運行 this.setState 并向其傳遞一個函數(shù)。該函數(shù)有兩個參數(shù)，第一個是來自狀態(tài)對象的整個列表數(shù)組，第二個是由 handleInput 函數(shù)更新的todo。然后該函數(shù)返回一個新對象，該對象包含之前的整個列表，并在其末尾添加todo。整個列表是通過使用擴展運算符添加的。

最后，我們將 todo 設(shè)置為空字符串，它會自動更新輸入字段中的 value。

Vue 的實現(xiàn)方法

createNewToDoItem() {
 this.list.push(
 {
 'todo': this.todo
 }
 );
 this.todo = '';
}

在 Vue 中，我們的輸入字段中有一個名為 v-model 的句柄。這實現(xiàn)了**雙向綁定。輸入字段代碼如下：

V-Model 將輸入字段的內(nèi)容綁定到名為 toDoItem 的數(shù)據(jù)對象的鍵（key）上。當(dāng)頁面加載時，我們將 toDoItem 設(shè)置為空字符串，比如：todo：' '。如果已經(jīng)存在數(shù)據(jù)，例如 todo：'添加文本處'，輸入字段將加載添加文本處的輸入內(nèi)容。無論如何，將其作為空字符串，我們在輸入字段中鍵入的任何文本都會綁定到 todo。這實際上是雙向綁定（輸入字段可以更新數(shù)據(jù)對象，數(shù)據(jù)對象可以更新輸入字段）。

因此，回顧前面的 createNewToDoItem() 代碼塊，我們將 todo 的內(nèi)容存放到列表數(shù)組中 ，然后將 todo 改為空字符串。

4. 刪除待辦事項

React 的實現(xiàn)方法

deleteItem = indexToDelete => {
 this.setState(({ list }) => ({
 list: list.filter((toDo, index) => index !== indexToDelete)
 }));
};

盡管 deleteItem 函數(shù)位于 ToDo.js 文件中，但是從 ToDoItem.js 文件中引用它也很容易，將 deleteItem() 函數(shù)作為 上的 prop 傳遞：

這會將該函數(shù)傳遞給子組件，使其可以訪問。我們綁定了 this 并傳遞 key 參數(shù)，當(dāng)用戶點擊刪除項時，函數(shù)通過 key 區(qū)分用戶點擊的是哪一條 ToDoItem 。然后，在ToDoItem 組件內(nèi)部，我們執(zhí)行以下操作：

想要引用位于父組件內(nèi)部的函數(shù)，只需引用 this.props.deleteItem 即可。Vue 的實現(xiàn)方法onDeleteItem(todo){
 this.list = this.list.filter(item => item !== todo);
}Vue 的實現(xiàn)方法稍有不同，我們需要做到以下三點：Step 1：首先，在元素上調(diào)用函數(shù)：-