Geek Answers Handbook

How to determine when to create a new component?

I was looking for logic when someone creates a new component in a web application on angularjs / angular , but I assume this is more general and can be applied to all interface based components.

I know that there are some principles like the one that should be abstract and reusable , but, for example, I saw in the angular docs that each individual route looks at a specific component (how it can be reused). Is there any solid question I could ask before creating a new component ?

+6
source share
6 answers

To decide whether to create a component or not, I think you should answer the following questions:

  • Is it possible to reuse your piece of code? If so, creating a new component seems like a great idea.
  • Is your code quite complicated? If so, it might be a good idea to separate it into separate components to make your code more readable and maintainable.
+8
source

This tip applies regardless of structure. A new component is usually created for one of two reasons:

(1) Resuability

. . , , . .

, , , , !

(2)

. , . . .

:

, . , / .

apponents.

, .

+5

Angular, , , . , , , .

Ionic ,

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let u of users">
      <ion-avatar item-left>
        <img src="{{u.ImgUrl}}">
      </ion-avatar>
      <h2>{{u.Name}}</h2>
      <p>{{u.Status}}</p>
    </ion-item>
  </ion-list>
</ion-content>

, ! , . , . , -, . . , . .

html, , , , angular, .

+1

, ,

(i) Identify the responsibility. , components responsibility, , .

(ii) When it is large. , 600 , , .

(iii) When you want to reuse. , , .

3 , . , .

+1

, , view/container, Angular, .

/

, , . ( ). . , .

, . , , .

AngularJS , React / ( ). , views components.

, , . , , - . , Angular. , , .

+1

React docs:

, ? . , . , .

JSON, , , (, , ) . , , , . , . https://facebook.imtqy.com/react/docs/thinking-in-react.html

PS. Also think about performance. By separating components, you can control the life cycle of a small point of view, so basically, if your component shows one (atomic) part of the data, you can easily determine when the component should be updated. see shouldComponentUpdate().

0
source

More articles:


All Articles