Sign in

How to extract components gracefully?

coeen edited in Wed, 25 Jan 2023

As the title, in vue.js , react.js How to extract the components is a better experience? The code before the project I'm working on is extremely confusing, so I need to refactor it.

For example, the home page has so many functions that there are thousands of lines of code. Is it a better strategy to extract every block and make it into a component?

What kind of situation needs to extract components?

If extracting components, how should props and events be considered?

Is there a better component extraction specification or solution?

PS: according to the specifications of Dachang, I talked with the head of the team before saying that I had seen some Alipay component extraction specifications, but I can't find them now.
2 Replies
commented on Wed, 25 Jan 2023

Design principles of front end components

commented on Wed, 25 Jan 2023
  1. If you use repeated code more than three times, you can consider extracting it as a component
  2. The logic is relatively close, and the code that is always updated together can be extracted as a component
  3. Props, more complex can consider injection or vuex
  4. For event, try to use browser events (because they can bubble)
  5. This part is closely related to the business, so it is difficult to say that there is a complete plan
  6. The above is mainly for Vue