React: рдЪреЗрддрд╛рд╡рдиреА рдЬрдм рдПрдХ рдЬреНрдЮрд╛рдкрди рдШрдЯрдХ рд╣реБрдХ рдФрд░ рд░рд╣рд╕реНрдп рджреЛрдиреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 7 рдлрд╝рд░ре░ 2019  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: facebook/react

рдХреНрдпрд╛ рдЖрдк рдХрд┐рд╕реА рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рдмрдЧ рдХреА рд░рд┐рдкреЛрд░реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?

рдмрдЧ

рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?

рдХрд┐рд╕реА рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдХрдВрд╕реЛрд▓ рдореЗрдВ рдПрдХ рдЪреЗрддрд╛рд╡рдиреА рджрд┐рдЦрд╛рдИ рдЧрдИ рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╕рднреА рд╢рд░реНрддреЗрдВ рд╣реИрдВ:

  • рдЗрд╕реЗ React.memo рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдпрд╛рдж рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ
  • рдпрд╣ рд╣реБрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ
  • рдпрд╣ рд╕рд╕реНрдкреЗрдВрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ (рдлреЗрдВрдХ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╡рд╛рджрд╛ рд╣реИ)ред

рдЙрд╕ рдЪреЗрддрд╛рд╡рдиреА рдХрд╛ рдкрд╛рда: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

рдпрджрд┐ рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдмрдЧ рд╣реИ, рддреЛ рдХреГрдкрдпрд╛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЪрд░рдг рдкреНрд░рджрд╛рди рдХрд░реЗрдВ рдФрд░ рдпрджрд┐ рд╕рдВрднрд╡ рд╣реЛ рддреЛ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдПрдХ рдиреНрдпреВрдирддрдо рдбреЗрдореЛред рдЕрдкрдиреЗ JSFiddle (https://jsfiddle.net/Luktwrdm/) рдпрд╛ CodeSandbox (https://codesandbox.io/s/new) рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ рджрд┐рдП рдЧрдП рд▓рд┐рдВрдХ рдХреЛ рдкреЗрд╕реНрдЯ рдХрд░реЗрдВ:

https://codesandbox.io/s/71lr16j491

рдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?

рдХреЛрдИ рдЪреЗрддрд╛рд╡рдиреА рдирд╣реАрдВ рджрд┐рдЦрд╛рдИ рдЬрд╛рдиреА рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рд╣реБрдХ рдХреЗ рдирд┐рдпрдо рдорд┐рд▓рддреЗ рд╣реИрдВред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛрдИ рдмрд╛рдд рдирд╣реАрдВ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдП рдЕрдЧрд░ React.memo рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВред

рд░рд┐рдПрдХреНрдЯ рдХреЗ рдХреМрди рд╕реЗ рд╕рдВрд╕реНрдХрд░рдг рдФрд░ рдХреМрди рд╕реЗ рдмреНрд░рд╛рдЙрдЬрд╝рд░ / OS рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рд╕реЗ рдкреНрд░рднрд╛рд╡рд┐рдд рд╣реИрдВ?

рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ 16.8.1

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

16.8.2 рдореЗрдВ рддрдп рдХрд┐рдпрд╛ рдЧрдпрд╛ред
https://codesandbox.io/s/vmmkmvo6pl

рд╕рднреА 4 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореЗрд░рд╛ рдкрд╣рд▓рд╛ рдкрдврд╝рд╛ рдпрд╣ рдПрдХ рдмрдЧ рд╣реИред

рдореИрдВрдиреЗ рд╕рдВрд╕реНрдХрд░рдг 16.8.1 рдореЗрдВ рдЗрд╕ рдмрд╣реБрдд рд╣реА рд╕рдорд╕реНрдпрд╛ рдХреЛ рджреЗрдЦрд╛ред рд╣рд╛рд▓рд╛рдБрдХрд┐ рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ рдЙрд╕ рдЬрдЧрд╣ рдХреЗ рдмреАрдЪ рдХреЛрдИ рдЬреНрдЮрд╛рдкрди рдШрдЯрдХ рдирд╣реАрдВ рд╣реИ рдЬрд╣рд╛рдБ Promise рдлреЗрдВрдХрд╛ рдЧрдпрд╛ рд╣реЛ рдФрд░ Suspense рдШрдЯрдХ рд╣реЛред

рдШрдЯрдХ Promise рдлреЗрдВрдХреЗ рдЬрд╛рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╢реАрд░реНрд╖ рдкрд░ рджреЛ рд╣реБрдХ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЪреЗрддрд╛рд╡рдиреА рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИред рдореИрдВрдиреЗ рд╣реБрдХ рд╕реЗ рдкрд╣рд▓реЗ Promise рдХреЛ рд╢реАрд░реНрд╖ рдкрд░ рдлреЗрдВрдХ рджрд┐рдпрд╛, рдФрд░ рдпрд╣реА рдмрд╛рдд рд╣реЛрддреА рд╣реИред рдЪреЗрддрд╛рд╡рдиреА рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИ рдЕрдЧрд░ рдШрдЯрдХ рдХреЗ рднреАрддрд░ рдХреЛрдИ Promise ред

рдореЗрд░реЗ рдШрдЯрдХ рдХрд╛ рдордЬрд╛рдХ рдХреБрдЫ рдЗрд╕ рддрд░рд╣ рд╣реИ:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

рдЗрд╕рдХреА рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

16.8.2 рдореЗрдВ рддрдп рдХрд┐рдпрд╛ рдЧрдпрд╛ред
https://codesandbox.io/s/vmmkmvo6pl

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

addyosmani picture addyosmani  ┬╖  143рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AdamKyle picture AdamKyle  ┬╖  148рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

gaearon picture gaearon  ┬╖  111рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

acdlite picture acdlite  ┬╖  83рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

robdodson picture robdodson  ┬╖  129рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ