One, foreword

"Therefore, a journey of a thousand miles is short step; Not small streams, beyond into rivers and seas ". Xun Zi · Persuasion to Learn

1.1 Why Open Source Projects?

A high-quality, guaranteed open source project is actually worth learning, and I think of it as a treasure map. It’s also a “magic mirror”. The view is better when you stand on the shoulders of giants. For example, I often encounter a lot of students who are in the early stage of development will ask similar questions: “I want to learn XXX technology, where can I find good video materials?”, “I have no project experience, what is the best tutorial project?” and so on. In fact, Github is a good learning platform. It is naturally full of gold to browse the projects maintained by High Start or excellent technical teams or outstanding talents. When you encounter codes that you cannot understand when reading, you can also map the shortcomings of the current technology, so that you can immediately supplement the knowledge and come back to read. (I may be inexperienced, views do not represent the majority of people’s views, nuggets students can do a little reference oh 🤓)

1.2 Why are arco-Desing’s Collapse components selected?

In the last week of development planning, I encountered an experience optimization for the functionality of a component that was an outline component that mapped article title levels. Previously, due to the impact of the development cycle, this component only has the function of displaying titles and does not have the function of folding levels. As a result, it is very tiring to operate the scroll bar drop-down in the scenario of too many titles and because the synchronous scrolling of content and outline is not required in product requirements. So simply speaking is the need to add a small folding function, ha ha ha 🤪. But itself is a simple task that can no longer be simple, I still seriously think about 🤔. Otherwise only show hidden is too low, no silky feeling. At this point, I think of the folding interaction of some components in some UI libraries, such as Ant-Design’s Tree component, Menu component, collapse component. But those of you who know me know that I tend to be project-driven, and OF course I want to see a component before I finish my task. So I also took the opportunity to look at a relatively new UI library, Arco-Design, which is open source by the Byte team. Of course, I chose the less complex collapse components to explore the mystery of silky folding.

Second, open the arco-design source code

2.1 Open the project code

Go to the corresponding Github address of the project — Arco-Design. After opening the project address, the old hands should know how to get down 🤓. But it’s also compatible for some of you who might be new to this article. I’ll put the order down there, too.

#It is recommended to use SSH to download the project, which is proved to be faster than HTTPS

git clone [email protected]:arco-design/arco-design.git
Copy the code
#Once inside the project, you can install dependencies

 cd arco-desing
 
#I used the yarn package management mode because I saw the yarn.lock file in the project.
#Of course, you can also use NPM.

 yarn install
Copy the code

In addition to installing dependencies, we can go through package.json to see if there are any familiar or unfamiliar dependencies and what scripting commands the project comes with.

Here I can share a tip: If I have been working on a project and I see a package.json dependency library and find strange dependencies, I will find the purpose of the dependency and record it in my notes, as shown below: (Figure 1)

Figure 1:

After looking at package.json, you can take a look at the contents of md in the root directory — Figure 2, Figure 3. Because a project’s main introduction and features and how to debug are generally recorded in the root directory of the MD such as readme.md. CONTRIBUTING. Zh-cn. Md to find out how the project ran and debugged. And if you’re careful, you’ll notice there’s a name for something called storybook. The first time to see the small partner can be searched up, this is a hidden knowledge point 🧑🏫. (figure 4)

Figure 2:

Figure 3:

Figure 4:

Storybook: Is an open source tool for building UI components and pages individually. It simplifies UI development, testing, and documentation. — quoted in the official synopsis. To put it bluntly, this tool is for debugging a page while developing a component or page. Otherwise, it would be too much trouble to plug components into a single page for debugging, or to configure routes to look at different components. Project address: github.com/storybookjs… Project documentation: storybook.js.org/

So before we get inside the component we already have a knowledge point 🔭. We can then run the project against the action by using the command in Figure 3 – (Figure 5) to run the page.

Figure 5:

2.2 Enter the Collapse folder.

It’s best to get a feel for the functionality of a component before looking at it, so we can open the documentation to see what the collapse API methods are all about.

2.2.1 Discovery Automatically generates component documents

Collapse components (FIG. 6)

Figure 6:

You see some TSX, TS, MD files, and four oddly named folders. So we can delve into what the benefits of such naming are 🦹♂️.

The double underline before and after the name is generally used to refer to a special purpose, and is distinguished from the normal C++ are specific system library functions and macros are named this way, in python also means special method meaning. So the naming of Figure 6 certainly serves a purpose, and here the contents of the other three except the __test__ folder are md files, which, as I’ll just say, are automatically generated component documents.

How do we know that it’s generated automatically, of course it must have the command or logic that it triggered, and when we go back to package.json we see that there’s a bunch of these commands in the script command

The script is executed by this dependency (Figure 7), so we can go directly to the node_modules folder and find the arco-scripts folder.

Figure 7:

After tracing all the way to docgen/index.js, I found a config path (Figure 8) that completely leads to the config folder in our directory.

Figure 8:

So when we go back to the project, we can find some clues (Figure 9) that the MD format generated by the configuration of docgen.config.js is exactly what we see. But here to remind you, directly from here to see the source code are packaged after the product, nature is very difficult to understand, we want to understand all the contents of the inside, the most convenient or to find the corresponding source.

Figure 9:

And then the logic of how it works and I’m not going to go into it because it’s too much, but I can tell you how I found the source code. Go to the Githubacro-desing organization and find the Acro-CLI project, which stands for scaffolding, because I can tell from experience that there is a multi-package dependency that integrates these development scripts.

Figure 10:

Figure 11:

2.2.2 Opening the Collapse Component code

On the index.tsx page, I can see that this is just a function to introduce collapse components, Item components, and the corresponding type interface exports.

This is a common practice in projects. Export the main logic and components through index. Only import the main file where you use it.

When I actually get to the Collaspe. TSX code page, I usually read the code from the first line, slowly down, to ensure that the knowledge is absorbed. The import of all imports from the top of the file. Learn how to use the React API createContext, ReactNode, useContext, PropsWithChildren, and 🤓. There are also a series of tools, methods, hooks, and so on.

  • IsFunction: This utility function determines whether an incoming value is a function and returns a Boolean.
  • Cs: a self-written className utility function that integrates a component’s className and facilitates dynamic classNames, similar to the classNames library.
  • Omit: Similar to Typescript’s built-in omit tool type, a self-encapsulating tool function used to omit keys from objects.
  • ConfigContext: Context for the global configuration of the component, which can be used for props of the global component, usually global configuration.
  • IconCaretRight: An arrow points to the right of the Icon component
  • IconCaretLeft: An arrow points to the Icon component on the left
  • useMergeValue: a custom hook that maintains internal and external values, which are actually maintained in the current componentactiveKeysThe state of the array key being expanded. (It can also be seen from the component documentation that there is a custom expansion function)
  • UseMergeProps: a custom hook that the current component is using to maintain the merge state of external configurations with global and default configurations.

Most of these methods can be learned and used for our own projects. As we explore further, we can find a method similar to the one shown below. This is a method that returns the global class name. This wrapper can easily replace the global component class name by changing the top-level main class name. This is a trick that many UI libraries use.

There is an onItemClick method next to the method below, which, as the parameter signature shows, is the click method to be triggered when folding. It checks whether the accordion in the props is alive, i.e. if the accordion mode of the document is enabled. If this is turned on, it will always keep the current key, so the array will always have length 1. Instead, it will collect multiple expanded keys. It is bound to the onToggle attribute in the collapsecontext. Provider value of the wrapped collapse component, which is used to share props to children. Value also has some props properties for expandIconPosition, which determines the position of the icon to return whether to use left-pointing or right-pointing ICONS as we introduced earlier. In fact, the collapse component is only a place to pass values, the real core is in the item.tsx page that we will enter next.

2.2.3 Open the Item component code

Once I got into the component, I found a library that was critical for me to complete my requirements, the react-transition-group.

When we used React to mount and unload a component, did we find that the mount and unload process was completed in a flash? It was very difficult to add the entry and exit animations. The react-transition-group helps us solve this problem by telling it when to mount a component, when to uninstall a component, and how long it takes to mount and uninstall the component. Then it automatically manages the stages of mounting and unmounting and exposes each stage to us. So we can do different operations at different stages to achieve the animation effect. — quote from bytedance’s education front end team.

Browsing to the bottom, we continue to find a small detail operation, the small arrow icon of folding panel. We remember that we only introduced the two ICONS obviously left and right, but when expanded, the ICONS point down and are very smooth, and the implementation is also very simple, using CS can dynamic class name rule, Rotation is controlled by the isExpanded variable for the class name that has a rotation style. Transform naturally takes advantage of the GPU, so this animation works very smoothly.

Here’s the thing, finally discovering the secret of fluency. As described above in the react-transition-group, it helps us to fire events in phases, allowing us to use more fine-grained animation styles for components. The cubic- Bezier function was used to adjust the parameters of the Bezier curve to make the expansion of Item so smooth.

So we can take advantage of the changes in our project components to achieve a smoother experience.

In this case, the props parameter in destroyOnHide should be used to Collapse and destroy the component. In this case, the props parameter in destroyOnHide should be used to Collapse the component.

The secret is that the Transition component provides two exit callbacks to determine whether to unload the component.

Third, summary

In fact, the main purpose of this article is also to share with you how to seriously read a section of components, not missing details, so often can chew deeper absorption more, in fact, there are good programs or optimization is worth studying. The current example is small, but there is much to be gained. It is worth reading the source code to understand.

🤩👏 here I really want to praise Dachang, dachang is that his writing is really more thoughtful than ordinary people. 🤑 🦄