The React component library research Button

background

It is my honor that our team received the revision demand of zent, the internal React component library. In order to write better components and better codes, it is absolutely essential to investigate the existing excellent component library.

Although the task said that it was a competitive product survey, it should not be a competitive product at all given our usage volume. After all, Even I had never heard of Zent before receiving the task, only vant. When it comes to Vant, you can recruit people in the middle stage, and you can order food together with Chenjiahan, the vant author who has been praised by You, and play king together. You can also play auxiliary for you, leave a message directly or contact me!

Without further ado, first of all, I would like to thank Ant for giving me the material for my initial research. Second, thanks to the big boys at Byte, semi and ARco are open source.

What I was assigned was basically the development and modification of form components. In the first chapter, I started from Button.

Research ing

Most of the pages must be introduced to the 3 libraries developed by the big guys. After all, we should hold the mentality of learning, and definitely not because of the fear of being discovered and beaten on the ground by the big brothers for teasing Zent.

The UI contrast

Semi > ant > arco =??

semi

ant

arco

??

Functional comparison

Ant and ARco are basically flat. Ant has more bounding frame, loading supports delay control time, and Semi lacks the link button function, but it is also written in the document that it is recommended to use link attribute to achieve it, and it has a drop-down button group function. Semi icon supports icon position control, while Ant and ARco need to write to button manually.

Code Style Comparison

I like semi’s code style so much that the screenshot is not complete, so I have hidden several objects and a screenshot, which is clear and easy to understand. Although the iconButton and Button are divided into two components, this code is really my favorite writing style and style (so clear that EVEN I can understand it).

Also, semi has nothing to do with Ant code in Button, and there is no reference. But here’s the interesting thing: just the picture, no words.

The code analysis

First of all, because Button is a relatively simple component, most functions are implemented by props, CSS and class.

The code in semi implements different styles of buttons depending on the values passed in to props. The point that can be analyzed in the button is actually automatically added space between the logic in the icon and the 2 Chinese characters.

Icon processing

In simple terms, the processing of the icon is to determine the position of the icon and then insert children to the left or right of the icon.

Semi does not deal with children, but directly sets a span outside children. Then, according to iconPosition, it judges margin-left/right and directly sets style on span.

The processing of Ant and ARco is a bit more complicated, which is the same code in the screenshot above. Take arco for example.

function processChildren(children? : ReactNode) {
  const childrenList = [];
  let isPrevChildPure = false;
  React.Children.forEach(children, (child) = > {
    const isCurrentChildPure = typeof child === 'string' || typeof child === 'number';
    if (isCurrentChildPure && isPrevChildPure) {
      const lastIndex = childrenList.length - 1;
      const lastChild = childrenList[lastIndex];
      childrenList[lastIndex] = `${lastChild}${child}`;
    } else {
      childrenList.push(child);
    }
    isPrevChildPure = isCurrentChildPure;
  });
  return React.Children.map(childrenList, (child) = >
    typeof child === 'string' ? <span>{child}</span> : child
  );
}
Copy the code

In fact, it combines the child of type string and number into a span, and then adds margin to SVG and SPAN from CSS.

If it is not a string, it will not generate a margin, whatever the entire A tag, because the logic does not go to the span step, there will not be a margin.

Space is automatically added between two Chinese characters

This function is not very straightforward to describe, as you can see from the previous figure. Semi does not provide this function. You can use it with Arco and Ant configProvider. Ant is enabled by default. If the button child is two Chinese characters, it will automatically add a space in the middle.

To determine whether there are two Chinese characters, just use the re to determine the line.

const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
Copy the code

Although it is a feature, ant and Semi implement different scenarios.

In Ant, when there is only one Child, after spaceChildren, Ant manually adds a space to the string child.

if (typeof child === 'string') {
  return isTwoCNChar(child) ? <span>{child.split('').join(SPACE)}</span> : <span>{child}</span>;
}
Copy the code

In ARCO, however, the several-spacing approach of CSS is used to achieve this style.

In Ant, if I add two Children that are both Chinese characters, it does not automatically add Spaces, because react.children. Count (Children) === 1. Arco is not affected because it is directly controlled by CSS.

const a = 'it';
const b = 'set';
<Button type="primary">{a}{b}</Button>
Copy the code

Of course, THERE may be other points THAT I did not take into account. If I made a mistake, I hope the big man can correct me.

animation

This is only done by Ant. When clicking on ant’s button, there will be a wavy shadow around it. This screenshot is too difficult, so you can click on it yourself, because Ant has a layer of Wave animation components on top of the button. Big guy as expected cow force, simple button also arranged clearly.

If you are interested, you can go and have a look. Animation is nothing more than adding a class point by point and then writing an animation.

I can’t, but I can brag.

conclusion

In fact, the first look is not button, but input, but because the button component is relatively simple, you can write while practicing, input is a bit too complicated, it would be a piece of shit.

Although the Button component was relatively simple, I learned a lot from the big guys’ code.

Button article is still smooth, the next input while writing and learning, I don’t know how long it will take to work out ~