Antd is a React UI component library based on Ant Design system, which is mainly used to develop enterprise-level middle and back-end products.

I dare say that as long as React is used for development in China, except dachang, React development almost uses this UI component library for development. It provides a large number of useful components, and also provides a selection box that can display 100,000 pieces of data. It also uses virtual lists.

Antd forms are also a highlight! It provides the Render method, which allows you to customize each column of the table and retrieve the value of the current column. To do this in Element, you have to use slots, which can be tedious.

I’ve been blowing about it every day lately and it works so well that it has a layer on top of Antd, like a background shelf.

ProLayout, this one component can complete the side navigation bar, top bar, footer, etc. Then you might ask if it’s too hard to customize a component that manages so many things.

However, I was more surprised by the customization feature, which provides a large number of properties that allow you to customize almost everything, such as the navigation bar and the top bar, which are all interchangeable.

React is a one-way data stream. Would creating a form be cumbersome and require heavy use of setState?

However, both Antd and ProForm reduce the level of repetition in creating a form by several levels. Recall that if you are creating a form in Vue, you should declare a variable in data and bind that variable bidirectionally through the V-Model.

In ProForm, you don’t even need to declare variables:

<ProForm onFinish={async (values) => { await waitTime(2000); console.log(values); Message.success (' Commit successful '); }} > <ProFormText name="mangerName" label=" business manager"Copy the code

Here’s a simplified version of the code. You just write a name property, and then you don’t have to do anything, just click ok, and it automatically goes to the onFinish property. In this property you get a value that contains all the values you defined for the form, and you just pass it to the back end. And when you click submit, it automatically adds a submit animation to you.

Form validation is also very simple!

<ProFormText name="mangerName" label=" Business manager "rules={[{required: true}]} />Copy the code

Just add rules and it will complete the prompts automatically.

In short, ProComponents packages a lot of Antd components, which can solve almost 80 percent of your requirements for building a management system.

Umi, which can be pronounced as Umi in Chinese, is an extensible enterprise front-end application framework. Umi is route-based and supports both configured and contracted routes to ensure complete functions of routes and extend functions. It is then paired with a well-lifecycle plug-in system that covers every lifecycle from source code to build artifacts, supporting various functional extensions and business requirements.

React Router Config allows you to configure routes in a file as Vue does, which makes it very difficult to manage.

Umi solved the problem of React routing, and it not only solved the routing problem, but also provided server rendering (SSR), quick refresh, load on demand, environment variables and other convenient functions.

At the same time, a new function was released in Umi 3.5: MFSU, which can greatly improve the startup and hot update speed of projects. For details, see the comparison in the figure below.

It can be seen that when mfSU is enabled, except for the first startup, the second startup takes a lot less time. I personally tested the second startup time around 4s, which makes you more efficient in developing front-end applications.

But! There are many problems with mfSU, such as the occasional page refresh after file update.

As we all know, complex state management in React uses Redux. However, Vuex is much easier to use than Redux, so ants encapsulate redux-Saga based on Redux and Redux-Saga. This is Dva. Dva has the same ease of use as Vuex. At the same time, it can also be inserted into Umi project as a plug-in. However, I have not introduced Dva in the current project, because the background management system rarely needs a state shared by multiple interfaces. Even if it does, it can easily complete the transmission of these states through Umi’s own simple data flow.

Big artifact! One of the most recommended is its useRequest core hook! While the hook was inspired by other libraries, the Ant team’s goal was to make it more usable than any other library.

UseRequest has anti-shake, throttling, parallel requests, dependent requests, manual triggers, default requests, and a ton more!

Think about how you want to get network data in Vue.

Data axios.get("https://example.com"). Then (res=>{data = res.data.data; })Copy the code

What if you have a new piece of data that needs to be requested again? Then you need to encapsulate the above code as a method and call it when you need it. What if you also need anti-shock or throttling? Do you have to cover it again? What if you also need a loading variable to control whether the interface displays a loading prompt? Do you have to declare a loading state, set it to true before the request is made, and then set it to false after the request is finished?

I’m sure about 80 percent of you would do it, because I do it, and of course the big guys might have an easier way to do it.

But with useRequest this becomes very simple.

const { data, error, loading, run } = useRequest(getUsername); // getUsername indicates the network request to be initiatedCopy the code

Just put the network request in the hook useRequest, it will automatically generate the value of the request success data, the value of the request failure error, the request state loading, repeatedly request function run.

GetUsername can also be followed by an object that can be used to place various parameters:

const { data, error, loading, run } = useRequest(getUsername, {debounceInterval: 500});
Copy the code

DebounceInterval means to start the anti-shake function, isn’t it very simple?

Of course, it does more than that, this is just a reference to the official documentation, and I will also sort out the hooks I feel are frequently used in a future article.

With the ecological understanding of ants and the use of JSX becoming more and more convenient, Vue and React are not better or worse. It can only be said that COMPARED with React, Vue is more suitable for people who have just learned HTML+CSS+JavaScript. In addition, learning Vue can get a lot of job opportunities in China. There are a lot of small outsourcing companies that use Vue technology stack. If you are just changing industries, Vue is definitely the best choice for you.