React, vue, and reactvue

React, vue, and reactvue

The choice of vue is between react and angular. The framework syntax is a little more than react, but it is a little less than angular.

It is precisely because of the different choices that the presented writing and thinking methods will certainly be different, regardless of the advantages and disadvantages, but it will certainly lead to different preferences.

React has few core APIs. Therefore, we can see that react is actually a UI library and is not a complete framework. It just tells us how to create components and how to transmit data between components. Even the method for creating components is to use ES6 class syntax (createClass will be discarded in react 16 ).

Therefore, the use of react in development is highly dependent on ES6 syntax. Because react itself does not have many highly restrictive syntaxes. We only need to know the props, state, ref, and lifecycle in the component, as if there is no additional knowledge. Even if you want to traverse rendering in the jsx template, you have to use the native map method. After understanding the high-level components of react, we found that it is actually the Way of Thinking involved in JavaScript functional programming.

So in my opinion, react is simple and very similar to native JavaScript. That is, there are very few limitations on developers. If you know how to implement a function using native JavaScript, you will be able to easily know how to implement it using react.

Of course, a simple core API does not mean it is easy to get started. At the beginning, if your experience is poor, the performance of the pages you write with react may be very poor. Because it is unconscious, your components may have a lot of extra rendering.

For example, many people may encounter a countdown when learning react. This example is implemented by modifying the state in the component. However, later we will know that this method is very wrong. Every modification to the state will result in re-rendering of the component and all its sub-components. This is very costly. Of course, I also know that when debugging react, the browser is stuck directly due to high-frequency repeated rendering. These problems are caused by too few restrictions on yuyuxi.

Some people on the internet think they are arrogant. They use a react/vue framework and write the same code as shi. What is terrible is that they also ridicule this. I also met a person who said that he had used angular for many years and said that angular was really spam, performance was poor, and what kind of black was not even used by track. Drink!

React has no real two-way binding. Therefore, it is very difficult to process complex scenarios, such as complex form verification.

In contrast, vue provides more capabilities. These convenient capabilities will make beginners feel very happy, because a lot of results can be achieved only by some simple code. I would like to list a few items that I personally think are amazing:

• Unified management of computing attributes

JavaScript expressions are very convenient. Whether it is vue or react, expressions are essential. But as the official vue documentation says, putting too much logic in the template will make the template too heavy and difficult to maintain. The vue component provides a computing attribute for Unified Expression management.

<template><div id="example">    <p>Original message: "{{ message }}"</p>    <p>Computed reversed message: "{{ reversedMessage }}"</p></div></template><script>export default {    name: 'example',    data () {        return {            message: 'Hello'        }    },    computed: {        reversedMessage: function() {            return this.message.split('').reverse().join('')        }    }}</script>

• I feel very comfortable with the dynamic Syntax of class.

In practice, we will find that many such scenarios need to determine the specific value of an element class according to different States. However, if you only use a simple expression or condition in the jsx template, the following may make you feel quite uncomfortable.

<p className={active ? 'note active' : 'note'}></p>

When the logic is a little more complex, it is hard to endure. The syntax supported by vue easily solves this problem.

// You can set const pcls to {active: active, note: true} <p class = {pcls}> </p>

In this way, adding more class names will not cause extra complexity.

Of course, this is just a tool method that can solve the problem. When using react, you can use classnames to complete the same function. However, vue is directly supported.

• Bidirectional binding

Because react does not support two-way binding, it is very painful to implement complex form verification. While vue focuses on unidirectional data streams, it does not completely discard bidirectional binding, which makes development efficiency much higher than react in such complicated form verification scenarios. This is also a saving aspect of vue.

• Modifier

When writing event processing logic, we often neede.preventDefault. The modifier function provided by vue can help us save the code, which is very convenient. If you use more, you will find that TM is easy to use.

<! -- Prevent click Event bubbling --> <a v-on: click. stop = "doThis"> </a> <! -- The page is no longer reloaded when the event is submitted --> <form v-on: submit. prevent = "onSubmit"> </form> <! -- Modifiers can be connected in series --> <a v-on: click. stop. prevent = "doThat"> </a> <! -- Only modifier --> <form v-on: submit. prevent> </form> <! -- Use the event capture mode when adding an event listener --> <div v-on: click. capture = "doThis">... </div> <! -- Triggers a callback only when the event is triggered by the element itself (rather than the child element) --> <div v-on: click. self = "doThat">... </div>

Of course, there are also key modifiers, you can go to the official website for further study.

Vue provides a lot of convenient and cute syntaxes, so you can try them on the official website. As mentioned at the beginning of this article, vue has some syntax restrictions, which reduce our development costs and improve development efficiency to some extent. This is probably the reason why many people think vue is easier to learn.

In terms of learning difficulty, the main reason why react is more difficult is not the react itself, but the rich ecosystem around react. Because react itself is simple enough, we need to know more react components. Such as react-router and react-redux. In addition, we do not know many useful components with great functions when we are not familiar with them. For example, when I learned the ant-design source code, I was often surprised to find that there was a component that could be used like this. It was really great! When I was learning vue, I was surprised to find that such a great component vue was already supported!

So I discovered that vue and react are so similar.

I still prefer react. But only because the react syntax is closer to ES6.

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!