Skip to content

Commit 87b51c2

Browse files
authored
Merge pull request #59 from willbuckingham/patch-1
Fix indent 323
2 parents d3a95c7 + 8939633 commit 87b51c2

File tree

1 file changed

+25
-25
lines changed

1 file changed

+25
-25
lines changed

README.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6279,36 +6279,36 @@ You can download the PDF and Epub version of this repository from the latest run
62796279
**[⬆ Back to Top](#table-of-contents)**
62806280
62816281
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.
62826283
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:
62856285
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+
```
62996297
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.
63016299
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:
63116301
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+
63126312
**[⬆ Back to Top](#table-of-contents)**
63136313
63146314
324. ### What are the benefits of using typescript with reactjs?

0 commit comments

Comments
 (0)