What are Vue and React?

To quote the introduction of the official document vue.js:

Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects.

React blog: Why Are we Building React?

React is a library for building composable user interfaces. It encourages the creation of reusable UI components for rendering data that changes over time.

You can see from above that both of them are actually dealing with the view layer.

Let’s think about it. Without React and Vue, in a traditional JavaScript application, we would have to watch what happens to the data and make changes to the DOM to keep it up to date. For example: use JQuery to obtain the corresponding DOM and modify the value of the node.

Vue and React offer a solution: glue layer + reactive update

Knowing that both are actually dealing with the same problem and choosing the same direction, the so-called difference can be limited to how they implement the so-called glue layer + responsive update.

Vue glue layer with responsive update

Take an example from the Demo on the official website.

new Vue({
  el: '#app-5'.template:` < div id = "app - 5" > < p > {{message}} < / p > < button v - on: click = "reverseMessage" > reverse message < / button > < / div > `
  data: {
    message: 'Hello Vue.js! '
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')}}})Copy the code

The template above is the concrete embodiment of the glue layer specifically referred to in this article, and data is the concrete embodiment of the corresponding update.

In real development we don’t have to deal directly with HTML+CSS, which is the real DOM, writing UI logic in Tempalte.

Through this glue layer, the contents of teample, Vue senses changes in the data that tempalte relies on and automatically performs real DOM operations to update the view.

When an object is defined as vue. data, it should no longer be a normal object, but rather the data in the diagram above, which is responsive data. So our operations on it are no longer simple “JS operations”, i.e. getters/setters, but through the agent Vue. So what Vue does is: some data changes, and the tempalte that depends on that data should update.

When we define data in vue. data, Vue2 uses object.defineProperty to get setter/getter operations to bind data to template and listen for changes to the data.

In actual development, we will not see agents, i.e

So it’s all so simple and intuitive to develop.

React glue layer with responsive updates

The React team probably decided that exploring a mature, simple approach wasn’t fun, so they chose another exploratory approach.

Take an example like the one above

import { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [message, setMessage] = useState("Hello React.js!");
  const reverseMessage = () = > {
    setMessage(message.split("").reverse().join(""));
  };
  return (
    <div className="App">
      <p>{message}</p>
      <button onClick={reverseMessage}>Inversion of the message</button>
    </div>
  );
}

ReactDOM.render(<App />.document.getElementById("root"));

Copy the code

We can equate JSX returned in React to tempalte in Vue. All setState does is define a responsive variable in data in Vue.

Vue’s reactive data only needs to be defined in Vue. Data. To the developer, this object is already reactive data, so if I modify it, it should update itself to the view.

React does not have a response data ==. Even the message variable obtained from useState is an ordinary variable, so it is simply changed and will not be reflected in the view.

React: If you want changes to a variable to be synchronized to the view, you can define a variable using the useState method, which does not listen for changes to the variable. When the user wants to update the view, call the setter function for the variable (setMessage in this example) and pass the value of the variable (setMessage in this example). Message.split (“”).reverse().json(“”)), React takes the data and redraws it.

How does that feel? Take the design of the house and the house for example

The house has been built according to the design, but I’m not satisfied with it. I want to change the shape of the room.

When the worker was Vue, he was a good worker who treated the customer as god. He found that the customer had changed the room in the design drawing. As a good worker, he didn’t need the customer to tell him. Active! Quick! Go and tear this room apart and make a round one.

When the worker was React, he was a person with his own life, so work was just a part of his life. Customers how to change the design, he did not care, when the user changed, finalized, customers came to him, he began to look at the design draft. And he didn’t want to say a word more to customers, and told them: You want to do what I do, if not sure, you go back to make sure. If the user decides on the design, he turns around and demolishes the entire house and builds a new one based on the latest design. Then the modification of the room must be in line with the user’s expectations.

Corresponding to the code is:

  • Design draft is: glue layer (Tempalte, JSX)
  • The house is: the real DOM
  • The room is data

When we modify data in Vue, Temaplte senses that, and Vue takes the initiative to modify the real DOM

When changing state in React, we explicitly call setState to tell React to update the view and pass a specific value.

React reexecutes the Function Component again. We can simply implement a useState to simulate this process for better understanding

import ReactDOM from "react-dom";

let memoizedState;

function useState(initialState) {
  memoizedState = memoizedState || initialState;
  
  function setState(newState) {
    memoizedState = newState;
    render(); // Tell React workers to change the house
  }
  return [memoizedState, setState];
}

/ / the design draft
function App() {
  const [message, setMessage] = useState("Hello React.js!");
  const reverseMessage = () = > {
    setMessage(message.split("").reverse().join(""));
  };
  return (
    <div className="App">
      <p>{message}</p>
      <button onClick={reverseMessage}>Inversion of the message</button>
    </div>
  );
}

function render() {
  // Build a house from scratch according to the design
  ReactDOM.render(<App />.document.getElementById("root"));
}
render();

Copy the code

When the user uses a function component in JSX, i.e.
, React executes the function component, i.e. Function App (){… } to get the value returned by return.

Therefore, every time the render is performed, function App will execute it, which is just like the feeling of building a house from scratch.

In actual React code, two trees are used for comparison and reuse

React reexecutes the function to get the latest result, and then updates the React result to the real DOM.

With this thought in mind, we look at the usual why

  • When you write an infinite rendering component, you know it must be multiplesetXXXThat’s causing a problem.
  • We defined too many operations in this function, which need to be optimized. This is useEffect or useCallback to tell React that when you re-execute this function, please do not repeat the operation.

For details on how to use useEffect and useCallback, read the best resource on React Hooks: An overview of Hooks

Off-topic: Vue3 and React hooks

Vue3’s Reactivity is so damn good! Why don’t you write React? That was just, like, a high! Even the way Vue3 is written, the implementation and concept are the same as above.

The only downside might be:

  • The agent layer was insensitive, but now it’s responsive, so it’s a little less intuitive. But it depends on what dimension to think from: I think it is good as it is now, both have their pros and cons. Like the Refs proposal or something.
  • API is really a lot of, please yu Xi do personal bar, don’t spoil the developers, API is more good and bad, but! Really don’t make simplified, really, some of the API is indeed improve the efficiency of production, I really can understand you is for developers, but in the short so fucking aniseed, there are several kinds of writing personal efficiency 1 s, pretend bility raise two points, the team everyone needs to go to the Vue document can find: oh my god, can write so…
  • Vuex… It’s a long story. I think Reactivity is ten times better than Reactivity. How to use Reactivity for state management will be another article written by then