每日進度 1

Question 1

come out with a picture of react life cycle

Answer 1

• 2 phases and their 特性
• 3 steps and life cycle methods
• “need to remember where to put [ React updates DOM and refS ] “

Question 2

what are the 特性 of the render phase?

Answer 2

1. pure and no side effects here
2. may be below 3 -ed by React // for Updating especially
   - 2.1. Paused
   - 2.2. Aborted
   - 2.3. Restarted // i.e. calling this.setState()、forceUpdate()、new props come in

Question 3

what may trigger re-start rendering?

Answer 3

calling

• 1. this.setState()
• 2. forceUpdate()
• 3. new props come in

Question 4

which phase does [ React updates DOM and refS ] live ?

Answer 4

it lives in [ commit phase ]

Question 5

mounting starts before?

Answer 5

components/elements are on our DOM

Question 6

what does constructor do?

Answer 6

• “know” props and states

- state initialized

Question 7

what does render do?

Answer 7

“know” the html (jsx) to show

Question 8

where to put api calls in Mounting?

Answer 8

componentDidMount

Question 9

[why] [api calls] stay in componentDidMount?
// hint: think of what will happen if we call apis

Answer 9

cuz we want to have [the base component]

• before loading data
• and updating the component (re-render)

Question 10

react won’t do what 2 things and why?

Answer 10

1. react [won’t re-mount] the component
2. react [won’t re-create] the element
   - cuz they are too costly to a browser

Question 11

what’s the [chain reaction] of a component gets [re-renderd] ? and what’s the problem of it ? also, what’s the solution of it ?

Answer 11

1. “re-render” [the component]
2. “re-render” the component’s [child componentS]
   - 可能太浪費效能
   - solution: shouldComponentUpdate ?

Question 12

what’s the possible problem of [re-rendering] ? and what’s the solution of it ?

Answer 12

• 可能太浪費效能

- solution: shouldComponentUpdate

Question 13

the thought of code of shouldComponentUpdate ? and why we need to do that (2) ?

Answer 13

return this.props.$prop !== nextProps.$prop;

1. for performance mainly
2. if they are the same, then there is no reasons to re-render

Question 14

[which] part is so important / fundamental for us to become a good react developer ?

Answer 14

• updating phase

- shouldComponentUpdate

Question 15

[why] updating phase or shouldComponentUpdate is important to us (2) ?

Answer 15

一、cuz it’s related to

1. how [code is structured] in [a component]
2. how [the architecture of a react project] is
   - they [are based around updating phase]

二、updating is fundamentally React Lib Does for us

三、this is why we [break our code up] into componentS

四、React’s updating phase makes our life easier…

Question 16

which 2 parts [are based around updating phase] that is so fundamental for us to become a great react developer?

Answer 16

1. how [code is structured] in [a component]

2. how [the architecture of a react project] is

Question 17

what is React Lib fundamentally do for us?

Answer 17

updating

Question 18

why we break our code up into componentS?

Answer 18

react data flow、updating

- 因為React最主要幫我們做的就是 handle the updating by [ its data flow ] // 這也是為什麼我們需要React

Question 19

which phase react does for us makes our life easier?

Answer 19

• updating phase

- react handles the updating by [ its data flow / React Data Flow ]

Question 20

react updates [the DOM / Components] based on what [inside of our components] ? also, what it will trigger ?

Answer 20

一、react updates [the DOM / Components] based on

• new props coming in
• this.setState()
• forceUpdate()

二、what it will trigger
- this triggers [ a chain reaction ], like updating our component and its child components (not only render itself, but also re-render any child components it has)

Question 21

which part of lifecycle methods is the method we can leverage on [to allow us possibly improve the performance of our application] ?

Answer 21

• to update / updating, [ shouldComponentUpdate ] is the lifecycle method that we can leverage to possibly [improve the performance] of our application
• it also gives us a better idea of [ when we should do what with our components ]

Question 22

which part of lifecycle methods gives us a better idea of [ when we should do what with our components ] ?

Answer 22

shouldComponentUpdate in updating phase in react component life cycle

Question 23

shouldComponentUpdate give us what kind of idea ?

Answer 23

it gives us the idea like [ “when” we should do “what” with our components ] for [ improving performance ] to components / our app