You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6279,36 +6279,36 @@ You can download the PDF and Epub version of this repository from the latest run
6279
6279
**[⬆ Back to Top](#table-of-contents)**
6280
6280
6281
6281
323. ### What is the difference between Imperative and Declarative in React?
6282
+
Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.
6282
6283
6283
-
Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.
6284
-
The imperative way of doing this would be:
6284
+
The imperative way of doing this would be:
6285
6285
6286
-
```javascript
6287
-
if( user.likes() ) {
6288
-
if( hasBlue() ) {
6289
-
removeBlue();
6290
-
addGrey();
6291
-
} else {
6292
-
removeGrey();
6293
-
addBlue();
6294
-
}
6295
-
}
6296
-
```
6297
-
6298
-
Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.
6286
+
```javascript
6287
+
if( user.likes() ) {
6288
+
if( hasBlue() ) {
6289
+
removeBlue();
6290
+
addGrey();
6291
+
} else {
6292
+
removeGrey();
6293
+
addBlue();
6294
+
}
6295
+
}
6296
+
```
6299
6297
6300
-
In contrast, the declarative approach would be:
6298
+
Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.
6301
6299
6302
-
```javascript
6303
-
if( this.state.liked ) {
6304
-
return<blueLike />;
6305
-
} else {
6306
-
return<greyLidke />;
6307
-
}
6308
-
```
6309
-
6310
-
Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand.
6300
+
In contrast, the declarative approach would be:
6311
6301
6302
+
```javascript
6303
+
if( this.state.liked ) {
6304
+
return<blueLike />;
6305
+
} else {
6306
+
return<greyLidke />;
6307
+
}
6308
+
```
6309
+
6310
+
Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand.
6311
+
6312
6312
**[⬆ Back to Top](#table-of-contents)**
6313
6313
6314
6314
324. ### What are the benefits of using typescript with reactjs?
0 commit comments