每日進度 1 Flashcards
come out with a picture of react life cycle
- 2 phases and their 特性
- 3 steps and life cycle methods
- “need to remember where to put [ React updates DOM and refS ] “
what are the 特性 of the render phase?
- pure and no side effects here
- 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
what may trigger re-start rendering?
calling
- this.setState()
- forceUpdate()
- new props come in
which phase does [ React updates DOM and refS ] live ?
it lives in [ commit phase ]
mounting starts before?
components/elements are on our DOM
what does constructor do?
- “know” props and states
- state initialized
what does render do?
“know” the html (jsx) to show
where to put api calls in Mounting?
componentDidMount
[why] [api calls] stay in componentDidMount? // hint: think of what will happen if we call apis
cuz we want to have [the base component]
- before loading data
- and updating the component (re-render)
react won’t do what 2 things and why?
- react [won’t re-mount] the component
- react [won’t re-create] the element
- cuz they are too costly to a browser
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 ?
- “re-render” [the component]
- “re-render” the component’s [child componentS]
- 可能太浪費效能
- solution: shouldComponentUpdate ?
what’s the possible problem of [re-rendering] ? and what’s the solution of it ?
- 可能太浪費效能
- solution: shouldComponentUpdate
the thought of code of shouldComponentUpdate ? and why we need to do that (2) ?
return this.props.$prop !== nextProps.$prop;
- for performance mainly
- if they are the same, then there is no reasons to re-render
[which] part is so important / fundamental for us to become a good react developer ?
- updating phase
- shouldComponentUpdate
[why] updating phase or shouldComponentUpdate is important to us (2) ?
一、cuz it’s related to
- how [code is structured] in [a component]
- 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…
which 2 parts [are based around updating phase] that is so fundamental for us to become a great react developer?
- how [code is structured] in [a component]
2. how [the architecture of a react project] is
what is React Lib fundamentally do for us?
updating
why we break our code up into componentS?
react data flow、updating
- 因為React最主要幫我們做的就是 handle the updating by [ its data flow ] // 這也是為什麼我們需要React
which phase react does for us makes our life easier?
- updating phase
- react handles the updating by [ its data flow / React Data Flow ]
react updates [the DOM / Components] based on what [inside of our components] ? also, what it will trigger ?
一、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)
which part of lifecycle methods is the method we can leverage on [to allow us possibly improve the performance of our application] ?
- 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 ]
which part of lifecycle methods gives us a better idea of [ when we should do what with our components ] ?
shouldComponentUpdate in updating phase in react component life cycle
shouldComponentUpdate give us what kind of idea ?
it gives us the idea like [ “when” we should do “what” with our components ] for [ improving performance ] to components / our app
