Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the difference between vue and react in creating APP". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between vue and react in creating APP".

1. target

I will build a standard to-do application that allows users to add and remove items from the list. Both applications are built using the default CLI (command-line interface, command line interface), and React uses create-react-app,Vue and vue-cli.

The appearance of the two applications is as follows:

The CSS code for the two applications is almost the same, but the location of the code is different. With this in mind, let's take a look at the file structure of these two applications:

You will find that their structures are almost exactly the same. The only difference is that React App has three CSS files, while there is no CSS file in Vue App. This is because the create-react-app component of React needs an accompanying file to save its style, while Vue CLI adopts an all-inclusive approach, and its style is declared in the actual component file.

Here the editor has built a front-end learning and exchange QQ group: 132667127, I have sorted out the latest front-end materials and advanced development tutorials, if you want, you can join the group to learn and communicate together.

The results of the two different strategies are the same, and I believe developers will soon be able to master these two different strategies. Developers can choose according to their own preferences, and you will hear a lot of discussion in the development community about how to build CSS. Above, we follow two CLI to list the code structure.

Before we go any further, let's take a quick look at the appearance of typical Vue and React components:

Vue on the left and React on the right

Now let's get started and get into the details!

two。 How to modify data

First of all, we need to understand what "modify data" means. It sounds academic, but it is actually very simple, which is to change the data that we have already stored. For example, if we want to change a person's name variable from "Jhon" to "Mark", we need to perform a "modify data" operation. At this point, React and Vue are handled differently. Vue essentially creates a data object in which the data can be changed freely; React creates a state object that requires some extra action to change the data. React has its own reasons for requiring additional operations, which I'll cover in more detail later. Before that, let's take a look at the data objects in Vue and the state objects in React:

Vue data object

React status object

As you can see from the figure, we pass in the same data, but they are marked differently. Therefore, the way in which the initial data is passed to the component is very similar. But as we mentioned, there are different ways to change data in the two frameworks.

Suppose we have a data element named name: 'Sunil'.

In Vue, we refer to it by calling this.name. We can also update it by calling this.name = 'John'. As a result, the name was successfully changed to "Jhon".

In React, we refer to the same piece of data by calling this.state.name. The key difference now is that we can't simply write this.state.name = 'John', because React has a restriction mechanism that prevents this simple modification. In React, we need to write: this.setState ({name:'John'}).

Although this is basically the same as what we achieved in Vue, the operation of React is more cumbersome because Vue combines its own version of setState by default each time the data is updated. To put it simply, React needs setState and then updates its internal data, while for Vue, it defaults to your intention to change when you update the value of the data object. So why isn't React simplified, and why do you need setState? Revanth Kumar explains this:

"this is because React wants to rerun certain lifecycle hook when the state changes, such as componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate. When you call the setState function, it knows that the state has changed. If you change the state directly, React will need to do more to track changes, run lifecycle hook, and so on. So for simplicity, React uses setState." Now that we know how to change the data, let's take a look at how to add new items to the to-do application.

3. Add a new to-do list

The realization method of React

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

In React, our input field has an attribute named value. This value is automatically updated by using several functions that are bound together to create a two-way binding. We create this form of bi-directional binding by attaching an onChange event listener to the input field. Take a look at the code to find out:

The handleInput function runs whenever the value of the input field changes. It updates the todo within the state object by setting the state object to anything in the input field. The handleInput function is as follows:

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

Now, as long as the user presses the + button on the page to add a new item, the createNewToDoItem function runs this.setState and passes it a function. This function takes two arguments, the first is the entire list array from the state object, and the second is the todo updated by the handleInput function. The function then returns a new object that contains the entire previous list and adds a todo at the end of it. The entire list is added by using the extension operator.

Finally, we set todo to an empty string, which automatically updates the value in the input field.

The realization method of Vue

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

In Vue, we have a handle named v-model in our input field. This implements * * two-way binding. The input field code is as follows:

V-Model binds the contents of the input field to the key (key) of the data object named toDoItem. When the page loads, we set toDoItem to an empty string, such as: todo:''. If the data already exists, such as' where the todo:' added text', the input field will load the input at the added text. In any case, any text we type in the input field will be bound to todo as an empty string. This is actually a two-way binding (input fields can update data objects, and data objects can update input fields).

So, looking back at the previous createNewToDoItem () code block, we put the contents of the todo into a list array, and then change the todo to an empty string.

4. Delete to-do list

The realization method of React

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

Although the deleteItem function is located in the ToDo.js file, it is easy to reference it from the ToDoItem.js file, passing the deleteItem () function as a prop on the:

This passes the function to the subcomponent to make it accessible. We bind the this and pass the key parameter, and when the user clicks the delete item, the function uses key to distinguish which ToDoItem the user clicked. Then, inside the ToDoItem component, we do the following:

To reference a function that is inside the parent component, simply reference this.props.deleteItem. The implementation method of Vue onDeleteItem (todo) {this.list = this.list.filter (item = > item! = = todo) } the implementation of Vue is slightly different, we need to do the following three things: Step 1: first, call the function on the element:-Step 2: then we must create an emit function as the inner method of the subcomponent (in this case, ToDoItem.vue), as follows: deleteItem (todo) {this.$emit ('delete', todo)} Step 3: later, you will find that when we add the ToDoItem.vue of ToDo.vue Actually refers to a function: {if (e.key = 'Enter') {this.createNewToDoItem () The event listener of Vue, the implementation of Vue, is more straightforward. We only need to use a simple @ symbol to build the event listener we want. For example, to add a click event listener, code: + Note: @ click is actually an abbreviation for v-on:click. Vue event listeners are so powerful that you can select properties for them, such as .once to prevent event listeners from being triggered multiple times. In addition, it contains many shortcuts. When you press the enter button, React takes longer to create event listeners, thus creating a new ToDo project. In Vue, the code is as follows: 6. The implementation of how to pass data to the subcomponent React in React, we pass the props to the creation of the subcomponent. For example: here we pass two prop to the ToDoItem component. After that, we can reference them through this.props in the subcomponents. So, to access item.todo prop, we just need to call this.props.item. The way Vue is implemented in Vue, we pass the props to the subcomponent creation as follows: we pass them to the props array in the subcomponent, such as: props: ['id','todo']. You can then reference them by name in the subcomponents. 7. The implementation of how to send data back to the parent component React we first pass the function to the child component by referencing it as prop when we call the child component. Then we add a calling function, such as onClick, for the subcomponent by referencing this.props.whateverTheFunctionIsCalled. This then triggers the function in the parent component. The entire process is described in detail in the delete to-do section. The implementation of Vue in the child component, we only need to write a function to send a value back to the parent function. Write a function in the parent component to listen to when the child component emits an event of this value, and then trigger the function call after hearing the event. Similarly, the entire process is described in detail in the delete to-do section. 8. To sum up, we studied adding, deleting, and changing data, passing data from the parent component to the child component in prop, and sending data from the child component to the parent component through event listeners. Of course, there are some small differences between React and Vue, and hopefully the content of this article will help you understand the two frameworks. Thank you for reading, the above is the content of "what is the difference between vue and react in creating APP". After the study of this article, I believe you have a deeper understanding of what is the difference between vue and react in creating APP, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.