I am struggling with React recently, so I would like to share some of my problems and corresponding solutions, looking forward to discussing and making progress together with you!

An overview of the

React: How to implement the getFieldDecorator wrapper on demand in the Ant framework.

Writing is limited, code is the programmer’s true love. After reading the following lines of simple code and its comments, you will have a clearer idea of the problems described in this article.



Ps: Of course, in many cases, you may just need to load the routing components on demand, without such a detailed component operation. Please don’t get tangled up. This article focuses on technical issues, and you can choose your own application scenarios flexibly.

Train of thought

Now that the problem is clear, we should have a general idea before we start to solve it:

  1. Look it up online
  2. Go to Github to see if there are any examples
  3. The method in n is omitted here
  4. Self lifting code

For this problem, it is actually difficult to find the corresponding data and examples (it may be true that there is not much demand). The react lazy-loading component is not that easy to find. Let’s take react-loadable as an example.

Step 1: Use react-loadable

The code is roughly as follows, relatively simple, also do not need to comment, specific can view the official documents and examples.



Code masturbation, run to see, don’t see don’t know, a look startled…

  1. Lazy-loaded Input is out of focus after each character and needs to be refocused to enter the second character
  2. Lazy-loaded Select, after the selection is complete, other controls (such as Input Input) an operation, the Select has a blinking effect
  3. The accidental Form reset is invalid
  4. .

It has to be fixed, doesn’t it?

So, react-devtools





It looks like everything is okay. All the props and states are available.

Well, I can’t. I can’t find the data and project reference. It seems that it can only be enlarged, look at the source code!



Here is the source code for React-Loadable. So, the getFieldDecorator wrapper in Ant causes all components to be regenerated if any of the components in the Form (such as Input) change their value (onchange) and the Form is updated.

The code corresponding to react-loadable is: Any control (such as Input) triggers onchange, the Form updates, and all controls re-constructor, init, and render, first to the first if and second to the second if.

To verify this, print state in the Render method of react-loadable:

this.state-- {error: null, pastDelay: true, timedOut: false, loading: true, loaded: null}
this.state-- {error: null, pastDelay: true, timedOut: false, loading: false, loaded: Module}Copy the code

Loading and loaded fields are loaded. Each onchange will undergo a loading process from true to false.

React-loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable loadable

  1. Instead of using getFieldDecorator, add your own onchange implementation logic
  2. Encapsulate react-loadable to avoid repeating constructor->load each time
  3. React-loadable itself doesn’t work for this scenario. Find a new one, or build your own

Method one, have interest to practice by oneself, pure theory share, author oneself also did not toss over!


Step 2: React-loadable encapsulation

The code is as follows, a very simple change, each load finished component, save, reuse.

Although react-loadable is also cached, only network requests are cached. Each load process is reloaded, but the second process is very fast. The solution is to cache components directly.

Because the rich text editor of the nuggets copy after the newline failure, if you need to see the source here, you can click here to see



Step 3: Build your own wheel

Consider creating a loadable component that supports component-level caching. The Source code for React-Loadable itself is over 300 lines, which may have a lot of functionality we don’t need.

  1. They made the wheels themselves, from more than three hundred rows to more than twenty
  2. Good encapsulation, switching at will (i.e. switching at low cost when you want to switch back to React-loadable)

Because the rich text editor of the nuggets copy after the newline failure, if you need to see the source here, you can click here to see



It’s also easy to use:

import loadable from './my-loadable'
function getLoadableComponent(componentName) {
    return loadable(() => import('.. /form-items/' + componentName), null, null, componentName)
}
export default getLoadableComponentCopy the code

Code word is not easy, feel that this article is helpful to you, trouble point to encourage encouragement.