React: рдЙрдкрдпреЛрдЧ рдХреЙрд▓рдмреИрдХ рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд▓реМрдЯрд╛рддрд╛ рд╣реИ рдЬрдм рдШрдЯрдХ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 15 рдирд╡ре░ 2018  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: facebook/react

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

рдмрдЧред

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

React.useCallback undefined рдЬрдм рдШрдЯрдХ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рддреЛ React.useCallback рд▓реМрдЯрд╛рддрд╛ рд╣реИред

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

useCallback рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рд░рд┐рдПрдХреНрдЯ рдШрдЯрдХ рдмрдирд╛рдХрд░ рдЗрд╕ рдмрдЧ рдХреЛ рдкреБрди: рдЙрддреНрдкрдиреНрди рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рд╕рд░реНрд╡рд░ рдкрд░ рд░рд┐рдЯрд░реНрди рд╡реИрд▓реНрдпреВ рд▓реЙрдЧ рдХрд░рдиреЗ рд╕реЗ undefined рдЬрдмрдХрд┐ рдпрд╣ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдареАрдХ рд╕реЗ рд▓реМрдЯрд╛рддрд╛ рд╣реИред

рдЖрдк рдЗрд╕ CodeSandbox рдореЗрдВ рдЗрд╕ рдмрдЧ рдХрд╛ рдирд┐рд░реАрдХреНрд╖рдг рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ: https://codesandbox.io/s/r557kww6wn рдЖрд╡реЗрджрди рдареАрдХ рд╕реЗ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдмрдЧ рдХрдВрд╕реЛрд▓ рдкрд░ рджреЗрдЦ рд░рд╣реЗ рд╣реИрдВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рджрд╛рди рдХреА рдЧрдИ рд╣реИ, рддреЛ рдЖрдк рдЙрд╕ рдХреЗ рд░рд┐рдЯрд░реНрди рдорд╛рди рджреЗрдЦреЗрдВрдЧреЗ useCallback рд╣реИ undefined ред

рдпрд╣рд╛рдВ рдмрд┐рд▓реНрдХреБрд▓ рд╡рд╣реА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд╣реИ рд▓реЗрдХрд┐рди рдХреНрд▓рд╛рдЗрдВрдЯ рдкрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ: https://codesandbox.io/s/xvwv797pxz рдлрд╝рдВрдХреНрд╢рди рдХрдВрд╕реЛрд▓ рдкрд░ рдареАрдХ рд╕реЗ рд▓реЙрдЧ рдЗрди рд╣реИред

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

React.useCallback рдпрд╛рдж рдХрд┐рдП рдЧрдП рдХреЙрд▓рдмреИрдХ рдХреЛ рд╡рд╛рдкрд╕ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рди рдХрд┐ undefined ред

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

  • рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛: резрем.рен.реж-рдЕрд▓реНрдлрд╛.реи
  • рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдбреЛрдо: резрем.рен.реж-рдЕрд▓реНрдлрд╛.реи

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

рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмрдЧ рд╣реИ; рд╡рд╣ рдХреЛрдб рдЯрд┐рдкреНрдкрдгреА рдЧрд▓рдд рд╣реИред рдореЗрд░реА рд╕рдордЭ рдпрд╣ рд╣реИ рдХрд┐ рдЪрд░рдг рдХреЙрд▓рдмреИрдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╕рд╣реА рд╣реИред

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

рдпрд╣ рдЬрд╛рдирдмреВрдЭрдХрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╡реНрдпрд╡рд╣рд╛рд░ рд╣реИред

рд╕рд░реНрд╡рд░ рд╡рд╛рддрд╛рд╡рд░рдг рдкрд░ рдХреЙрд▓рдмреИрдХ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдирд╣реАрдВ рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рддрд░реНрдХ рдпрд╣ рд╣реИ рдХрд┐ рдЪреВрдВрдХрд┐ рдХреЙрд▓рдмреИрдХ рдИрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓рд░ рдЬреИрд╕реЗ onClick , рдЬреЛ рдПрд╕рдПрд╕рдЖрд░ рдХреЗ рджреМрд░рд╛рди рд╕рд╛рд░реНрдердХ рдирд╣реАрдВ рд╣реИрдВ, рд░рд┐рдПрдХреНрдЯ рдХреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЙрди рдкрд░ рдирдЬрд╝рд░ рд░рдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рдЙрди рд╕рдВрд╕рд╛рдзрдиреЛрдВ рдХреЛ рдореБрдХреНрдд рдХрд░рдирд╛ рдЬрд┐рдирдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ рдЕрдирд╛рд╡рд╢реНрдпрдХ рд░реВрдк рд╕реЗ рдЙрди рдХрд╛рдВрдЯреЛрдВ рдкрд░ рдирдЬрд╝рд░ рд░рдЦрдХрд░ рдЬрд┐рдирдХрд╛ рдХрднреА рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

рдЪрд┐рдВрддрд╛ рди рдХрд░реЗрдВ, рдкреБрдирд░реНрдЬрд▓реАрдХрд░рдг рдХрд░рддреЗ рд╕рдордп, рдХреЙрд▓рдмреИрдХ рд╣реЛрдВрдЧреЗред

рд▓реЗрдХрд┐рди, рдХреНрдпрд╛ рдореИрдВ рдкреВрдЫ рд╕рдХрддрд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣реЗ рд╣реИрдВ?

рдзрдиреНрдпрд╡рд╛рдж @arianon ЁЯСМ рдореИрдВ рдЕрдкрдиреЗ useMappedState рдХреЗ рд╕рд╛рде useCallback рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП redux-react-hook рдХреЗ рд╕реБрдЭрд╛рд╡ рдХрд╛ рдкрд╛рд▓рди рдХрд░ рд░рд╣рд╛ рдерд╛ред рд╕рдВрдХрд▓реНрдкрдирд╛рддреНрдордХ рд░реВрдк рд╕реЗ, рдЬрд┐рд╕ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдореИрдВ рдпрд╛рдж рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рд╡рд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреЙрд▓рдмреИрдХ рдирд╣реАрдВ рд╣реИред рдкрд╣рд▓реЗ рддреЛ рдореИрдВрдиреЗ рдЗрд╕ рдкрд░ рдзреНрдпрд╛рди рдирд╣реАрдВ рджрд┐рдпрд╛ рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕ рд╢рдмреНрдж рдХрд╛ рдкреНрд░рдпреЛрдЧ рд╡рд┐рднрд┐рдиреНрди рд╕рдВрджрд░реНрднреЛрдВ рдореЗрдВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдкреНрд░рд▓реЗрдЦрди рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рд╣реИ рдХрд┐:

useCallback(fn, inputs) useMemo(() => fn, inputs) рдмрд░рд╛рдмрд░ рд╣реИред

рдореИрдВ рдПрдХ рдЕрджреНрдпрддрди рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рднрдВрдбрд╛рд░ рдкрд░ рдПрдХ рдореБрджреНрджрд╛ рдЦреЛрд▓реВрдВрдЧрд╛ рдлрд┐рд░ рд╕реЗ рдзрдиреНрдпрд╡рд╛рдж!

рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмрдЧ рд╣реИ; рд╡рд╣ рдХреЛрдб рдЯрд┐рдкреНрдкрдгреА рдЧрд▓рдд рд╣реИред рдореЗрд░реА рд╕рдордЭ рдпрд╣ рд╣реИ рдХрд┐ рдЪрд░рдг рдХреЙрд▓рдмреИрдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╕рд╣реА рд╣реИред

AFAICT рдХреЗрд╡рд▓ рд╡рд╣реА рдЪреАрдЬреЗрдВ рд╣реИрдВ рдЬреЛ рд╕рд░реНрд╡рд░ рдХреА рддрд░рдл рдирд╣реАрдВ рдЪрд▓рдиреА рдЪрд╛рд╣рд┐рдП, рд╡реЗ рд╣реИрдВ рдкреНрд░рднрд╛рд╡ рдФрд░ рд░реЗрдлрд░реА рд╡рд┐рд╢реЗрд╖рддрд╛ рдЖрд░рдВрднреАрдХрд░рдгред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдПрдХ рдХрд╛рд░реНрдпрд╢реАрд▓ рдЙрдкрдпреЛрдЧ рдХреЙрд▓рдмреИрдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд░реЗрдВрдбрд░ рдкреНрд░реЛрдк рдПрдЪрдУрд╕реА рдкреИрдЯрд░реНрди, рдЬреЛ рдЕрднреА рднреА рд▓рдВрдмреЗ рд╕рдордп рддрдХ рдкрд╛рд░рд┐рд╕реНрдерд┐рддрд┐рдХреА рддрдВрддреНрд░ рдХреЗ рд╕рд╛рде рд░рд╣реЗрдЧрд╛ред

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

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

kocokolo picture kocokolo  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

trusktr picture trusktr  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Prinzhorn picture Prinzhorn  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

hnordt picture hnordt  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

framerate picture framerate  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ