Not long ago, I sent a boiling point. There is no right or wrong way to use first, it depends on what you prefer.

And then I mean, it’s really easy. Why do you use React when I say you prefer JS? This is also what this article wants to say. Most people on Github’s React project don’t use React to recommend Jsx.

But I did get a lot of comments, and one of them made me feel like I was reading fake Anular2 source code. The following is some nonsense, which I can skip, but the person who sprayed me is an algorithm engineer. Probably a good one, too.

As a person who loves javascript programming, I will choose React more. After all, React has many strange wheels (Redux,Mobx,Dva). Of course, if you have strong architectural thinking, you can directly use the OBSERVER mode of Rxjs. But only if you have to know the model of single and js scope), switch to the vue selectivity is much less are almost vue buckets, but if you want to use the design patterns to manage your application development, so suggest use Ng2, in the development process, you will learn the ioc and dependency injection, single row, modifier (aop), Observer (responsive flow). If DDD mode development is going to be the trend, then NG2’s services /Http based on Rxjs are pretty much right for you.

That’s a little off base. Back to the subject.

React uses JSX instead of regular JavaScript.

JSX is a JavaScript syntax extension that looks a lot like XML.

We don’t have to use JSX, but it has the following advantages:

  • JSX executes faster because it is optimized after being compiled into JavaScript code.
  • It is type-safe and errors can be found during compilation.
  • Using JSX to write templates is much easier and faster.

Note that React uses JSX instead of regular JavaScript. That means Jsx is essentially JavaScript code.

You can do render func in Jsx.

Let’s take a simple scenario, that is, to make product recommendation function, we need to push different content for different customers in a certain column. So what do you do? In my daily work of Corde Review, I found that most developers write 70% of the occupancy rate as follows. However, in the Chinese market, it will be as fast as possible. I’m gonna run out of maintenance anyway. And the leaders rarely care about the code, can run on the line.

/** * There are three people */

enum PersionType {

Man = 1,

Woman = 2,

OldMan = 3

}

function HomePage(a) {

    const fetchGetQuery = ()=>{
        return 1
    }


    const data = fetchGetQuery()

    return <Observer>{() => {

        return (

        <>

            {

            data === PersionType.Man && (<>Man View</>)

            }

            {

            data === PersionType.Woman && (<>Woman View</>)

            }

            {

            data === PersionType.OldMan && (<>OldMan View</>)
            }
        </>)
    }}</Observer>;

}

export default HomePage;
Copy the code

Imagine if there were no longer three people in your business. How would you handle it? It’s already shit mountain code, so keep piling on shit mountain!!

So keep adding to this page

 {
    data === PersionType.XXXXX && (<>XXXX View</>)
 }
Copy the code

But think about it, because JSX’s underlying code is Javascript, how would you write that code? Oh, no. React developers are mostly Typescript. I don’t really know how to solve this problem because the traditional descendant approach is to change the template path of include. HTML, after all, is not execution code.

If you have studied design patterns, then the above examples can no doubt be used for couples using strategic patterns. Allows you to make small changes while keeping your code looking cleaner.

Let’s start with a simple hierarchy of folders

1.index.tsx // Our upper and lower PersionContext can also be our callers 2. view-strategy.tsx // where the specification interface is defined 3. main.tsx // implementedCopy the code

handle/index.tsx

import { ViewStrategy } from "./view-strategy";

class PersonContext {

    private viewStrategy: ViewStrategy;

    constructor(viewType: ViewStrategy) {
        this.viewStrategy = viewType;
    }

    public renderView() {
        return this.viewStrategy.render(); }}export default PersonContext;
Copy the code
handel/view-strategy.tsx

import React from "react";


export interface ViewStrategy {

render():React.ReactElement;

}
Copy the code
handle/man.tsx

import React from 'react';

import { ViewStrategy } from './view-strategy';


class Man implements ViewStrategy {

    render(): React.ReactElement<any.string | React.JSXElementConstructor<any> > {return (

            <>Main View</>); }}export default Man;
Copy the code

These are the three most basic relationships we implemented, so what do we do with our page now?

What we need here

function HomePage() {

const fetchGetQuery = () = >{
    /** * The best way to listen is to use RXJS, so that your PersionType changes. /** * The best way to listen is to use RXJS, so that your PersionType changes Your view changes at the same time. You only need to listen for the ViewStrategy type */
    if(true) {return new Woman()
    }

}


const data = fetchGetQuery()

return <Observer>{() => {

    return (

        <>

            {new PersonContext(data).renderView()}

        </>

    )

}}</Observer>;

}
Copy the code

With the code above, you can completely disconnect. Later, when you want to maintain that block in a different way, you just need to maintain the logic you have written in fetchGetQuery ().

One wonders, does this work?

Do you think it works?

React does not provide If/else in Jsx. But I do find that many developers like to write this way.

{ data === xxx && () } { data ! === XXX && ()} # This is not a problem if there is a loop. But are you sure you won't encounter recursion?? { data.map(val= > <> XXXX </>)}Copy the code

In fact, all of the above methods can be used to render, because JSX is Javascript. I don’t know why most developers like to work with HTML, but if you do, you might as well use a template engine. So what is a template engine? You ask the back end soon understand. What the template engine is really doing is manipulating the language to manipulate strings, using substitutions. JSX, however, was born bound to Babel. Switch to javascript via Babel… .

So your JSX operations are actually writing JavScript code. Not ng, vUE or something like that.

So when you’re dealing with complex logic, you can do something like this. It’s kind of like the Route recursion I did here

You can write if else, you can even write switch or do more.

Well, that’s all for today’s share. Look forward to your more SAO operation. After all, the front end is facing the next stage DDD, and even the design mode is not used. I really don’t know when the front end people will be able to use RXJS to deal with complex asynchronous problems.