React vs Vue：現(xiàn)在有了React Hooks Vue 3 Composition API！

React vs Vue：傳奇繼續(xù)

幾年前，我決定嘗試在React和Vue中構(gòu)建一個相當標準的To Do App。 這兩個應(yīng)用程序都是使用默認的CLI構(gòu)建的（React的create-react-app和Vue的vue-cli）。 我的目的是編寫無偏見的內(nèi)容，并提供有關(guān)如何使用這兩種技術(shù)執(zhí)行某些任務(wù)的概述。

當React Hooks發(fā)布時，我在原始文章后面加上了" 2019 Edition"，該版本將Class Components的使用替換為Functional Hooks。 隨著Vue第3版及其成分API的發(fā)布，現(xiàn)在是時候以" 2020版"再次更新本文了。

讓我們快速看一下這兩個應(yīng)用的外觀：

兩個應(yīng)用程序的CSS代碼完全相同，但是它們的位置有所不同。 考慮到這一點，接下來讓我們看一下兩個應(yīng)用程序的文件結(jié)構(gòu)：

最終，他們倆都能達成同一目標，而且無話可說，您無法繼續(xù)在React或Vue中以不同的方式構(gòu)造文件。 這實際上取決于個人喜好。 您將聽到來自開發(fā)人員社區(qū)的大量討論，關(guān)于CSS的結(jié)構(gòu)，尤其是關(guān)于React的結(jié)構(gòu)，因為存在許多CSS-in-JS解決方案，例如樣式組件和情感。 順便說一句，CSS-in-JS的字面意義就是這樣。 盡管這些功能很有用，但到目前為止，我們將僅遵循兩個CLI中列出的結(jié)構(gòu)。

但是在進一步介紹之前，讓我們快速看一下典型的Vue和React組件的外觀：

典型的React文件：

典型的Vue文件：

既然已經(jīng)解決了，讓我們深入了解細節(jié)吧！

我們?nèi)绾瓮蛔償?shù)據(jù)？

但是首先，"突變數(shù)據(jù)"甚至意味著什么？ 聽起來有點技術(shù)性嗎？ 基本上，這只是意味著更改我們已存儲的數(shù)據(jù)。 因此，如果我們想將一個人的名字的值從John更改為Mark，我們將"對數(shù)據(jù)進行突變"。 因此，這就是React和Vue之間的關(guān)鍵區(qū)別所在。 雖然Vue本質(zhì)上創(chuàng)建了一個數(shù)據(jù)對象，可以在其中自由更新數(shù)據(jù)，但是React通過狀態(tài)鉤子來處理它。

讓我們看一下下面兩個圖片中的設(shè)置，然后我們將說明發(fā)生了什么：

React狀態(tài)：

Vue狀態(tài)：

因此，您可以看到我們已經(jīng)將相同的數(shù)據(jù)傳遞給了兩者，但是結(jié)構(gòu)有些不同。

使用React或至少從2019年開始，我們通常會通過一系列的Hooks處理狀態(tài)。 如果您以前沒有看過這種概念，那么一開始它們可能看起來有些奇怪。 基本上，它的工作方式如下：

假設(shè)我們要創(chuàng)建待辦事項列表。 我們可能需要創(chuàng)建一個名為list的變量，它可能需要一個由字符串或?qū)ο蠼M成的數(shù)組（例如，如果我們想給每個待辦事項字符串一個ID和其他一些東西，我們可以通過編寫const [ list，setList] = useState（[]）。這里我們使用React稱為Hook的鉤子-稱為useState。這基本上使我們可以在組件中保留局部狀態(tài)。

另外，您可能已經(jīng)注意到我們在useState（）內(nèi)部傳入了一個空數(shù)組[]。 我們放在其中的是我們希望列表最初設(shè)置的內(nèi)容，在我們的例子中，我們希望是一個空數(shù)組。 但是，從上圖可以看到，我們在數(shù)組內(nèi)部傳入了一些數(shù)據(jù)，這些數(shù)據(jù)最終是list的初始化數(shù)據(jù)。 想知道setList是做什么的？ 稍后將對此進行更多說明！

在Vue中，通常會將組件的所有可變數(shù)據(jù)放置在setup（）函數(shù)內(nèi)，該函數(shù)返回一個對象，其中包含要公開的數(shù)據(jù)和函數(shù)（這基本上意味著您希望能夠使用的東西） 在您的應(yīng)用中使用）。 您會注意到，應(yīng)用程序中的每個狀態(tài)數(shù)據(jù)（也就是我們希望能夠進行突變的數(shù)據(jù)）都包裝在ref（）函數(shù)內(nèi)部。 此ref（）函數(shù)是我們從Vue導入的，可讓我們的應(yīng)用程序在任何更改或更新這些數(shù)據(jù)時都可以更新。 簡而言之，如果您想在Vue中創(chuàng)建可變數(shù)據(jù)，請為ref（）函數(shù)分配一個變量，并將任何默認數(shù)據(jù)放入其中。

那么我們?nèi)绾卧谖覀兊膽?yīng)用程序中引用可變數(shù)據(jù)呢？

好吧，假設(shè)我們有一些名為name的數(shù)據(jù)被分配了Sunil的值。

在React中，由于我們使用useState（）創(chuàng)建了較小的狀態(tài)，因此很可能已經(jīng)按照const [name，setName] = useState（'Sunil'）的方式創(chuàng)建了一些東西。 在我們的應(yīng)用程序中，我們將通過簡單地調(diào)用name來引用相同的數(shù)據(jù)。 現(xiàn)在，這里的主要區(qū)別在于我們不能簡單地寫上name ='John'，因為React有適當?shù)南拗苼矸乐惯@種簡單，隨意的突變產(chǎn)生。 因此，在React中，我們將編寫setName（'John'）。 這是setName位起作用的地方。 基本上，在const [name，setName] = useState（'Sunil'）中，它將創(chuàng)建兩個變量，一個變量將成為const name ='Sunil'，而第二個const setName被分配了一個函數(shù)，該函數(shù)可以使用新的名稱重新創(chuàng)建名稱。 值。

在Vue中，它位于setup（）函數(shù)內(nèi)部，并且被稱為const name = ref（'Sunil'）。 在我們的應(yīng)用程序中，我們將通過調(diào)用name.value來引用它。 使用Vue，如果我們要使用在ref（）函數(shù)內(nèi)部創(chuàng)建的值，我們將在變量上尋找.value而不是簡單地調(diào)用該變量。 換句話說，如果我們想要一個持有狀態(tài)的變量的值，我們將尋找name.value而不是name。 如果要更新name的值，可以通過更新name.value來完成。 例如，假設(shè)我想將我的名字從Sunil更改為John。 我可以通過寫name.value =" John"來做到這一點。 我不確定自己被稱為約翰的感覺，但是嘿，事情發(fā)生了！

實際上，React和Vue在這里做著同樣的事情，即創(chuàng)建可以更新的數(shù)據(jù)。 每當ref（）函數(shù)內(nèi)部包裝的一條數(shù)據(jù)被更新時，Vue本質(zhì)上都會默認結(jié)合其自己的name和setName版本。 React要求您使用內(nèi)部值調(diào)用setName（）來更新狀態(tài)，如果您試圖更新數(shù)據(jù)對象內(nèi)部的值，Vue會假設(shè)您要這樣做。 那么，為什么React還要從函數(shù)中分離值呢？為什么還要使用useState（）呢？ 本質(zhì)上，每當狀態(tài)改變時，React都希望能夠重新運行某些生命周期掛鉤。 在我們的示例中，如果調(diào)用setName（），React將知道某些狀態(tài)已更改，因此可以運行這些生命周期掛鉤。 如果直接改變狀態(tài)，React將不得不做更多的工作來跟蹤更改以及要運行的生命周期掛鉤等。

現(xiàn)在，我們已經(jīng)有了一些變通的方式，讓我們通過研究如何將新項目添加到兩個"待辦事項"中來了解更多細節(jié)。

我們?nèi)绾蝿?chuàng)建新的待辦事項？

React：

const createNewToDoItem = () => { 
 
const newId = generateId(); 
 
const newToDo = { id: newId, text: toDo }; 
 
setList([...list, newToDo]); 
 
setToDo(""); 
 
}; 

React是如何做的？

在React中，我們的輸入字段具有一個名為value的屬性。 每次通過onChange事件偵聽器更改其值時，都會自動更新此值。 JSX（基本上是HTML的變體）如下所示：

<input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/> 

因此，每次更改值時，它都會更新狀態(tài)。 handleInput函數(shù)如下所示：

const handleInput = (e) => { 
 
setToDo(e.target.value); 
 
}; 

現(xiàn)在，每當用戶按下頁面上的+按鈕添加新項目時，都會觸發(fā)createNewToDoItem函數(shù)。 讓我們再次看一下該功能，以了解發(fā)生了什么：

const createNewToDoItem = () => { 
 
const newId = generateId(); 
 
const newToDo = { id: newId, text: toDo }; 
 
setList([...list, newToDo]); 
 
setToDo(""); 
 
}; 

本質(zhì)上，newId函數(shù)基本上是在創(chuàng)建一個新ID，該ID將提供給我們的新toDo項。 newToDo變量是一個具有ID密鑰的對象，該ID密鑰具有newId的值。 它還具有一個文本鍵，該鍵將toDo中的值用作其值。 這與輸入值更改時要更新的toDo相同。

然后，我們用完setList函數(shù)，并傳入一個包含整個列表以及新創(chuàng)建的newToDo的數(shù)組。

如果… list位看起來很奇怪，則開頭的三個點稱為散布運算符，它基本上將列表中的所有值作為單獨的項目傳遞，而不是簡單地傳遞完整的 項目作為數(shù)組。 困惑？ 如果是這樣，我強烈建議您仔細閱讀散布，因為它很棒！

無論如何，最后我們運行setToDo（）并傳入一個空字符串。 這樣我們的輸入值為空，可以輸入新的toDos了。

Vue：

function createNewToDoItem() { 
 
const newId = generateId(); 
 
list.value.push({ id: newId, text: todo.value }); 
 
todo.value = ""; 
 
} 

Vue是如何做的？

在Vue中，輸入字段上有一個稱為v-model的句柄。 這使我們能夠執(zhí)行稱為雙向綁定的操作。 讓我們快速查看一下輸入字段，然后說明發(fā)生了什么：

<input type="text" placeholder="I need to..." v-model="todo" v-on:keyup.enter="createNewToDoItem"/> 

V-Model將該字段的輸入與我們在setup（）函數(shù)頂部創(chuàng)建的變量綁定在一起，然后將其作為鍵公開給我們返回的對象。 到目前為止，我們還沒有介紹對象返回的內(nèi)容，因此，對于您的信息，這是我們從ToDo.vue內(nèi)部的setup（）函數(shù)返回的內(nèi)容：

return { list, todo, showError, generateId, createNewToDoItem, onDeleteItem, displayError}; 

這里，list，todo和showError是我們的有狀態(tài)值，而其他所有功能都是我們希望能夠在應(yīng)用程序其他位置調(diào)用的函數(shù)。 好的，從切線返回，當頁面加載時，我們必須將todo設(shè)置為空字符串，例如：const todo = ref（""）。 如果這里已經(jīng)有一些數(shù)據(jù)，例如const todo = ref（"在此處添加一些文本"）：我們的輸入字段將在輸入字段內(nèi)部已經(jīng)添加一些文本的情況下加載。 無論如何，回到它作為一個空字符串，無論我們在輸入字段中鍵入什么文本都必須綁定到todo.value。 這實際上是雙向綁定-輸入字段可以更新ref（）值，而ref（）值可以更新輸入字段。

因此，回顧一下前面的createNewToDoItem（）代碼塊，我們看到將todo.value的內(nèi)容推入列表數(shù)組-通過將todo.value推入list.value-然后將todo.value更新為空字符串。

我們還使用了與React示例中相同的newId（）函數(shù)。

我們?nèi)绾螐牧斜碇袆h除？

React：

const deleteItem = (id) => { 
 
setList(list.filter((item) => item.id !== id)); 
 
}; 

React是如何做的？

因此，盡管deleteItem（）函數(shù)位于ToDo.js內(nèi)，但我很容易能夠通過首先將deleteItem（）函數(shù)作為道具傳遞給ToDoItem.js來對其進行引用：

<ToDoItem key={item.id} item={item} deleteItem={deleteItem} /> 

首先，該函數(shù)向下傳遞，以使兒童可以使用它。 然后，在ToDoItem組件內(nèi)部，執(zhí)行以下操作：

<button className="ToDoItem-Delete" onClick={() => deleteItem(item.id)}> -</button> 

我要做的就是引用位于父組件內(nèi)部的函數(shù)，就是引用props.deleteItem。 現(xiàn)在您可能已經(jīng)注意到，在代碼示例中，我們只是編寫了deleteItem而不是props.deleteItem。 這是因為我們使用了一種稱為解構(gòu)的技術(shù)，該技術(shù)允許我們獲取props對象的一部分并將其分配給變量。 因此，在我們的ToDoItem.js文件中，我們具有以下內(nèi)容：

const ToDoItem = (props) => { 
 
const { item, deleteItem } = props; 
 
} 

這為我們創(chuàng)建了兩個變量，一個稱為item，它被分配與props.item相同的值，另一個是deleteItem，它從props.deleteItem分配了值。 我們本可以通過僅使用props.item和props.deleteItem來避免整個破壞性的事情，但是我認為值得一提！

Vue：

function onDeleteItem(id) { 
 
list.value = list.value.filter(item => item.id !== id); 
 
} 

Vue是如何做的？

Vue中需要一種略有不同的方法。 我們基本上必須在這里做三件事：

首先，在元素上我們要調(diào)用函數(shù)：

<button class="ToDoItem-Delete" @click="deleteItem(item.id)"> -</button> 

然后，我們必須在子組件（在本例中為ToDoItem.vue）中創(chuàng)建一個emit函數(shù)作為方法，如下所示：

function deleteItem(id) { emit("delete", id);} 

同時，您會注意到，當我們在ToDo.vue中添加ToDoItem.vue時，我們實際上引用了一個函數(shù)：

<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" /> 

這就是所謂的自定義事件偵聽器。 它會偵聽在任何情況下使用字符串" delete"觸發(fā)發(fā)射的情況。 如果聽到此消息，它將觸發(fā)一個名為onDeleteItem的函數(shù)。 此函數(shù)位于ToDo.vue內(nèi)部，而不是ToDoItem.vue中。 如前所述，此函數(shù)僅從list.value數(shù)組中過濾ID。

在這里還值得注意的是，在Vue示例中，我可以簡單地將$ emit部分寫在@click監(jiān)聽器中，如下所示：

<button class="ToDoItem-Delete" @click="emit("delete", item.id)"> -</button> 

這將使步數(shù)從3減少到2，而這完全取決于個人喜好。

簡而言之，React中的子組件可以通過props來訪問父函數(shù)（前提是您要傳遞props，這是相當標準的做法，在其他React示例中，您會遇到大量的工作），而在Vue中，您可以 從孩子發(fā)出事件，通常將其收集在父組件中。

我們?nèi)绾蝹鬟f事件監(jiān)聽器？

React：

簡單事件（例如單擊事件）的事件偵聽器很簡單。 這是我們?nèi)绾螢閯?chuàng)建新的ToDo項目的按鈕創(chuàng)建click事件的示例：

<button className="ToDo-Add" onClick={createNewToDoItem}> +</button> 

在這里超級簡單，幾乎就像我們將如何使用香草JS處理嵌入式onClick。 如Vue部分所述，每當按下Enter鍵時，設(shè)置事件偵聽器進行處理就花費了更長的時間。 這本質(zhì)上需要由輸入標簽處理onKeyPress事件，例如：

<input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/> 

只要該函數(shù)識別出已按下" enter"鍵，便會觸發(fā)createNewToDoItem函數(shù)，例如：

const handleKeyPress = (e) => { 
 
if (e.key === "Enter") { 
 
createNewToDoItem(); 
 
} 
 
}; 

Vue：

在Vue中，它非常簡單明了。 我們只使用@符號，然后使用我們想要做的事件監(jiān)聽器的類型。 因此，例如，要添加一個click事件監(jiān)聽器，我們可以編寫以下代碼：

<button class="ToDo-Add" @click="createNewToDoItem"> +</button> 

注意：@click實際上是編寫v-on：click的簡寫。 Vue事件偵聽器很酷的事情是，您還可以綁定很多東西，例如.once，它可以防止事件偵聽器被多次觸發(fā)。 在編寫用于處理按鍵的特定事件偵聽器時，還有許多捷徑。 我發(fā)現(xiàn)，每當按下Enter鍵時，在React中創(chuàng)建一個事件偵聽器以創(chuàng)建新的ToDo項就花費了相當長的時間。 在Vue中，我能夠簡單地編寫：

<input type="text" v-on:keyup.enter="createNewToDoItem"/> 

我們?nèi)绾螌?shù)據(jù)傳遞給子組件？

反應(yīng)：

在react中，我們將道具傳遞到子組件的創(chuàng)建位置。 如：

<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />; 

在這里，我們看到兩個傳遞給ToDoItem組件的道具。 從現(xiàn)在開始，我們現(xiàn)在可以通過this.props在子組件中引用它們。 因此，要訪問item.todo prop，我們只需調(diào)用props.item。 您可能已經(jīng)注意到，還有一個關(guān)鍵道具（因此從技術(shù)上講，我們實際上正在傳遞三個道具）。 這主要用于React的內(nèi)部，因為它使在同一組件的多個版本之間進行更新和跟蹤更改變得容易（我們在這里擁有它，因為每個todo是ToDoItem組件的一個副本）。 確保您的組件具有唯一鍵也很重要，否則React會在控制臺中警告您。

Vue：

在Vue中，我們將道具傳遞到子組件的創(chuàng)建位置。 如：

<ToDoItem v-for="item in list" :item="item" @delete="onDeleteItem" :key="item.id" /> 

完成此操作后，我們將它們傳遞到子組件的props數(shù)組中，如下所示：props：[" todo"]。 然后可以通過子組件的名字在子組件中引用這些名字，因此在我們的案例中是todo。 如果您不確定該prop鍵的放置位置，則這是整個導出默認對象在子組件中的外觀：

export default { 
 
name: "ToDoItem", props: ["item"], setup(props, { emit }) { 
 
function deleteItem(id) { 
 
emit("delete", id); 
 
} 
 
return { deleteItem, }; 
 
}, 
 
}; 

您可能已經(jīng)注意到的一件事是，當在Vue中遍歷數(shù)據(jù)時，我們實際上只是遍歷了list而不是list.value。 嘗試遍歷list.value在這里行不通

我們?nèi)绾螌?shù)據(jù)發(fā)送回父組件？

React：

首先，通過在調(diào)用子組件的地方將其作為道具引用，將函數(shù)傳遞給子組件。 然后，通過引用props.whateverTheFunctionIsCalled（如果使用了解構(gòu)）或whatTheFunctionIsCalled，可以通過諸如onClick之類的任何方式在子元素上添加對函數(shù)的調(diào)用。 然后，這將觸發(fā)位于父組件中的函數(shù)。 我們可以在"我們?nèi)绾螐牧斜碇袆h除"部分中看到整個過程的示例。

Vue：

在子組件中，我們只編寫了一個將值返回給父函數(shù)的函數(shù)。 在父組件中，我們編寫了一個函數(shù)，該函數(shù)偵聽何時發(fā)出該值，然后可以觸發(fā)函數(shù)調(diào)用。 我們可以在"我們?nèi)绾螐牧斜碇袆h除"部分中看到整個過程的示例。

我們終于得到它了！

我們已經(jīng)研究了如何添加，刪除和更改數(shù)據(jù)，以道具形式將數(shù)據(jù)從父級傳遞到子級，以及以事件偵聽器的形式將數(shù)據(jù)從子級發(fā)送到父級。 當然，React和Vue之間還有許多其他的小差異和怪異之處，但是希望本文的內(nèi)容有助于為理解這兩個框架如何處理事物奠定基礎(chǔ)。

如果您有興趣分叉本文中使用的樣式，并想制作自己的同等作品，請隨時這樣做！

Github鏈接到兩個應(yīng)用程序：

Vue待辦事項：https://github.com/sunil-sandhu/vue-todo-2020

React待辦事項：https://github.com/sunil-sandhu/react-todo-2020

最初發(fā)布于：sunilsandhu.com