If you feel ok, please like more, encourage me to write more wonderful article 🙏.

If you have any questions, feel free to comment in the comments section

The profile

    1. What’s the React
    • MVC architecture in the front-end scenario
    • Flux design pattern
    • Redux + React = MVC
    1. JSX
    • Implement a JSX converter manually

This is a company group shared content, originally intended to write an article about
React_FiberSource code related things, but in the process of sharing found everyone on
ReactSome general
APIHow to use backwards recitation like flow. But if you go further or rise to the level of architecture, it becomes a little ambiguous. (When I discussed the situation with other technical personnel, I also had similar problems. In fact, it was not everyone’s fault, but the React
libraryThere are too many things involved. Not do not want to learn, but learn not to move. Who wouldn’t want to take a stroll through the canyon after 996?) So, I hold, I don’t “hell”, who go to hell determined to use me
shallowThe knowledge point, use another kind of Angle to describe briefly
ReactWhat it is.


I have my own cognition and opinion on something. If it is different from what you know, please point it out in the comments and discuss it together. After all,



There are a thousand Hamlets in a thousand people’s eyes

It’s getting late. It’s time to get down to business. Let’s get our books straight. (Guo Degang voice package) 👈 Click trigger

What’s the React

When we contact a person or thing, we may experience What 👉 Why 👉 How to do, namely What => Why =>How trilogy.

Therefore, we should follow this process in this article.

Let’s get to the heart of it. React!

When I communicated with some new front-end ER who just got in touch with the framework, I suddenly found a highly supportive statement.

React is an implementation of the MVC framework

In fact, if you think about it from an architectural perspective, this answer is politically correct. In other words, it’s hard to say you’re wrong, but admitting you’re right gets a lump in your throat.

But to say that something is XX, you need a context.

The React website already has an answer to the question of what React is.

A JavaScript library for building user interfaces

React is a UI library. I took his three people Declarative/ component-based /Learn Once and wrote Anywhere. Together they beat Ralph with their sticks.

In fact, this is where React can be difficult for beginners to get started, because you want to implement a page using what people call a framework. However, the framework is only responsible for the presentation of the page, which requires auxiliary tools to make the application run. And these auxiliary tools. There’s react-Router for route control, and Redux for page state control.

A real application, of course, requires state control. This is not, we are about to introduce the protagonist 👉 Redux is slowly walking towards us.

MVC architecture in the front-end scenario

The opinions expressed in this space are personal. If you have the same, thank you very much! If you have different views, please also point out in the comments section.

What is the MVC

I think you will see this concept all the time, whether you are interviewing or studying at work. The XXX framework is an implementation of the MVC framework. As we described above. Some people say React is an implementation of the MVC framework. So what exactly is MVC.

MVC, as an architectural pattern, is designed to achieve separation of code or, to use a fancy word, separation of concerns.

MVC is an acronym for three words: Model, View, and Controller.

Model: Data or information that a program needs to operate on



View: User interface



Controller: Connects the View to the Model and manages the logic between the Model and the View


In the server-side MVC architecture pattern, there is a very prominent feature, which is one-way data flow.

But, but, but, there’s a twist here, and an important point in the MVC concept introduced above is one-way data flow. But in the front-end scenario, MVC has been virtually changed to two-way data flow.

So here’s a summary of what I like to think about the hierarchy of front-end and back-end MVC.

Then we move on to how the data flows in the front-end MVC.

Example: The user clicks on a button(
view), and button binds the corresponding event callback (
Controller), and all the event callback does is change the innerText of the button (
Modal)

In addition to allowing users to trigger processes through View layer interactions, another form of THE MVC architecture allows users to trigger processes by directly triggering Controller logic

Example: The API provided by the user through the DOM,
bypassPage, which directly gets an instance of a button in the page, and the button is bound to the corresponding event callback (
Controller), and all the event callback does is change the innerText of the button (
Modal)

Front-end applications/frameworks often need to interact,Allows View and Model to communicate directly.

In fact, you may be confused by the front-end MVC concept at this point, but if I show you a couple of pictures, you’ll get a sense of it.

Before the front and back ends are separated, the task of assembling the page is actually on the server side. For example JSP(Java Server Page)

With Node, the front end can have its own resource services and its own routing system. This moves the UI layer that would otherwise be needed to provide the backend to the front-end scope.

What is Js MVC actually? Js MVC is just the View in the backend MVC to separate out the MVC, and has little to do with the backend MVC. Front-end MVC is to solve the problem of modular Js in the case of complex front-end. The most typical application, single page Js application.

We’re going too far with the MVC architecture. All right, let’s — close.

Why do WE talk about MVC framework? In fact, it is to introduce Flux design pattern.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework.

This description is from Flux’s website.

The following points can be drawn from its description

  • 1: architecture for client-side applications.
  • 2: provides one-way data flow
  • 3. It’s more of a design model.

From the figure above, we can see that there are four nodes in the Flux process.

Action Dispatcher Store View
A description of change Used to receive Actions and perform callback functions To store the state of the application,

Remind Views to update the page when changes occur		 The view layer

Let’s use a simple 🌰 to see how Flux works. Since Flux has now been replaced by Redux, I will simply CV the example from the official website to briefly show the data flow.

Redux + React = MVC

In fact, we talked a lot of nonsense not related to React in the above, just to use more angles to prove that React is the implementation of MVC framework, if only from React itself, it is not stable. (It is not stable, not stand, I in order to avoid peers beat face, give yourself some leeway).

How do you describe it in a way that makes it seem less plausible? In other words, under what circumstances can React be said to be an implementation of front-end MVC?

Watch your wording. React, with the help of Redux, is a viable front-end application.

React+ Redux = MVC

React isn’t really an MVC framework, either in terms of the concept of MVC or the responsibilities of the React library.

Let’s briefly describe the Redux workflow

Redux


A Predictable State Container for JS Apps

In fact, Redux provides a complete set of data management for React. Acting as M, M and C in the MVC architecture.

Redux is a concrete implementation of the Flux architecture pattern, so some of the concepts are also in Flux’s lineage.

Redux consists of three parts: Store, Reducer, and Action.

  • Store: A single data source, and it is read-only.
  • Action Describes the change.
  • Reducer is a function that distributes and processes changes and ultimately returns new data to the Store.

There might be a question here about how the View knows about Store data changes.

Let’s take a look at the source code of Redux.

First, register the corresponding callback function in view by calling SUBSCRIBE (()=>{}) in store. The corresponding event callback is pushed into a global Listeners array.

Secondly, in dispatch(Action), after the reducer calculates the latest state, callback functions with global presence will be successively called.

The following code has been truncated due to space constraints.

One more caveat: Many people feel that Redux was built for React. No, it’s a library that manages the flow of data to front-end applications. As stated on the website, Redux can be used with any prior framework.

If you are familiar with React and use Redux as the front-end data management. Must have been exposed to React-Redux. With react-Redux, we don’t have to subscribe every time a component listens for store changes. It was done in a more elegant way.

Wrap the component through HOCconnect and return an enhanced version of the component.

Other specific apis will not be covered here. If you want to learn more about Redux source code, you can see my original written pure hand hard Redux.

For now, let’s briefly describe how CONNECT is implemented.

If you want to listen for changes in Redux, you register the callback with store.subscribe().

Summary: I spent a lot of time explaining React and front-end MVC.

React is a UI library in one sentence.

And I decided to spend a lot of time talking about these concepts. The ultimate goal of 👉 is to give people a new perspective on React data flow from a framework perspective. React’s own data flow (one-way data flow) is poorly understood by others. So, I didn’t pick it up.

JSX

When developing React, people used JSX to represent the structure of the page. After reactdom.render, the structure of the page was written on paper.

So what is JSX?

According to React, JSX is a JavaScript syntax extension, or an XML-like ECMAScript syntax extension.

For more information about JSX, see JSX In Depth

But let’s think about JSX in a different way today. Since JSX is a syntactic extension of JS, there needs to be a very straightforward understanding. Conventional browsers don’t recognize it. Since you can’t recognize it, you need some way to translate it into a syntax that the browser can recognize. ES6+ – like syntax that requires processing to be recognized by the browser.

This is done by using Babel to convert it into a syntax that regular browsers can recognize by specifying the corresponding conversion rules.

The Babel kernel is actually a JS compiler.

Next, let’s take a look at this process by implementing a custom babel-Plugin.

Before we get into the code, we need a general understanding of the compiler flow.

Most compilers are divided into three steps: Parsing, Transformation, and Code Generation.

Parsing Transformation Code Generation
Convert raw code to AST(Abstract syntax tree) Parsing the AST was received, and the code was transformed according to the rules that were built into the Compiler Accept the code transformed by compiler, and convert the code into the final code format you want to output according to certain rules.

Because of space constraints, we’ll just CV the code. If you really want to understand how compiler works, you can refer to my original article. Compiler simple analysis and code to build a simple compiler

Implement a JSX converter manually

We use Babel to convert a JSX file.

. Babelrc ==> Babel configuration file

jsx-parser.js jsx-plugin.js

test.jsx

function JSX(){
	return <div><span>Hello JSX</span></div>
}
Copy the code

We’re throughbabel test.jsxTo enable Babel transcoding. The processing results are as follows:

There are a few things to note:

  • 1 Local Babel transcoding needs to be performed locally or globally babel-cli 👉 npm install babel-cli -g
  • 2 In the configuration file, the execution direction is from right to left.
  • React converts JSX to React. CreateElement converts JSX to React into a Virtual DOM

The purpose of this article is to describe the framework level data flow of React. For example, setState is synchronous and asynchronous, and how to realize Fiber architecture. Because it takes a lot of space to describe. Therefore, I plan to write a new description.