React: рдкреНрд░рд╢реНрди: рдХреНрдпрд╛ UseMef рдХреА рдЬрдЧрд╣ UseMemo рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ?

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

рдирдорд╕реНрддреЗ, рдмрд╕ рдЬрд┐рдЬреНрдЮрд╛рд╕рд╛ рд╕реЗ рдмрд╛рд╣рд░ useMemo рдХрд╛ рдЙрдкрдпреЛрдЧ useRef рдмрдЬрд╛рдп рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдЬрдм рдпрд╣ рдХрд░ рд░рд╣реЗ рд╣реИрдВ:

рдЙрджрд╛рд╣рд░рдг:

const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);

рдпрд╣ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рджреЛрдиреЛрдВ рд░реЗрдлрд░реА рдбреЛрдо рд░реЗрдлрд░реА рдХреЗ рд░реВрдк рдореЗрдВ рдареАрдХ рдХрд╛рдо рдХрд░ рд░рд╣реЗ рд╣реЛрдВрдЧреЗ рдФрд░ рд╡рд░реНрдЧреЛрдВ рдореЗрдВ рдЙрджрд╛рд╣рд░рдг рдХреНрд╖реЗрддреНрд░реЛрдВ рдХреЗ рд╕рдорд╛рди рдкрд░рд╕реНрдкрд░ рдореВрд▓реНрдпред рдХреНрдпреЛрдВ рддрдм useRef рдХреЛ useMemo рддреБрд▓рдирд╛ рдореЗрдВ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░рдХреЗ ReactFiberHooks.js рдХреЛрдб useRef рдФрд░ useMemo ?

рдзрдиреНрдпрд╡рд╛рдж!

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

рдЖрдк рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ рд░реЗрдл рдСрдмреНрдЬреЗрдХреНрдЯ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдпрд╣ useMemo рд╕реЗ рдХрдо рдХреБрд╢рд▓ рд╣реЛрдЧрд╛ рдФрд░ рдирд┐рд░реНрднрд░рддрд╛ рдХреА рддреБрд▓рдирд╛ рднреА рдХрд░реЗрдЧрд╛ред (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ рдЕрдЧрд░ рдЖрдк рдПрдХ рдЦрд╛рд▓реА рдирд┐рд░реНрднрд░рддрд╛ рд╕рд░рдгреА рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдореЗрдореЛ рд╣реБрдХ рдХреЗ рд▓рд┐рдП рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рдбреЗрдЯрд╛ рд╕рдВрд░рдЪрдирд╛ рдореЗрдВ рдЕрддрд┐рд░рд┐рдХреНрдд рдореВрд▓реНрдп рдХреЗ рд▓рд┐рдП рдЬрдЧрд╣ рд╣реИред)

рдЗрд╕реЗ рд╕рдордЭрдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдк useRef рдХреЗ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреА рддреБрд▓рдирд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.s#L907 -L92020

useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.js#L1126 -L1156 -L1156

рдЪреВрдВрдХрд┐ рджреЛрдиреЛрдВ рд╣реБрдХ рдЕрдХреНрд╕рд░ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ рд╡реЗ рдмреЗрд╣рддрд░ рдкреНрд░рджрд░реНрд╢рди рдХрд░реЗрдВ: рдореБрд╕реНрдХреБрд░рд╛рд╣рдЯ: рдЗрд╕рд▓рд┐рдП рд╡реЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рд┐рдд рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред

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

рдЖрдк рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ рд░реЗрдл рдСрдмреНрдЬреЗрдХреНрдЯ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдпрд╣ useMemo рд╕реЗ рдХрдо рдХреБрд╢рд▓ рд╣реЛрдЧрд╛ рдФрд░ рдирд┐рд░реНрднрд░рддрд╛ рдХреА рддреБрд▓рдирд╛ рднреА рдХрд░реЗрдЧрд╛ред (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ рдЕрдЧрд░ рдЖрдк рдПрдХ рдЦрд╛рд▓реА рдирд┐рд░реНрднрд░рддрд╛ рд╕рд░рдгреА рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдореЗрдореЛ рд╣реБрдХ рдХреЗ рд▓рд┐рдП рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рдбреЗрдЯрд╛ рд╕рдВрд░рдЪрдирд╛ рдореЗрдВ рдЕрддрд┐рд░рд┐рдХреНрдд рдореВрд▓реНрдп рдХреЗ рд▓рд┐рдП рдЬрдЧрд╣ рд╣реИред)

рдЗрд╕реЗ рд╕рдордЭрдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдк useRef рдХреЗ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреА рддреБрд▓рдирд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.s#L907 -L92020

useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.js#L1126 -L1156 -L1156

рдЪреВрдВрдХрд┐ рджреЛрдиреЛрдВ рд╣реБрдХ рдЕрдХреНрд╕рд░ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ рд╡реЗ рдмреЗрд╣рддрд░ рдкреНрд░рджрд░реНрд╢рди рдХрд░реЗрдВ: рдореБрд╕реНрдХреБрд░рд╛рд╣рдЯ: рдЗрд╕рд▓рд┐рдП рд╡реЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рд┐рдд рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред

рдЖрдк _could_ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ рд░реЗрдл рдСрдмреНрдЬреЗрдХреНрдЯ рдмрдирд╛рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдпрд╣ useMemo рдмрд╛рдж рд╕реЗ рднреА рдХрдо рдХреБрд╢рд▓ рд╣реЛрдЧрд╛ рдФрд░ рдирд┐рд░реНрднрд░рддрд╛ рдХреА рддреБрд▓рдирд╛ рдХрд░рддрд╛ рд╣реИред (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ рдЕрдЧрд░ рдЖрдк рдПрдХ рдЦрд╛рд▓реА рдирд┐рд░реНрднрд░рддрд╛ рд╕рд░рдгреА рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдореЗрдореЛ рд╣реБрдХ рдХреЗ рд▓рд┐рдП рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рдбреЗрдЯрд╛ рд╕рдВрд░рдЪрдирд╛ рдореЗрдВ рдЕрддрд┐рд░рд┐рдХреНрдд рдореВрд▓реНрдп рдХреЗ рд▓рд┐рдП рдЬрдЧрд╣ рд╣реИред)

рдЗрд╕реЗ рд╕рдордЭрдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдк useRef рдХреЗ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреА рддреБрд▓рдирд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.s#L907 -L92020

useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/rc/ReactFiberHooks.js#L1126 -L1156 -L1156

рдЪреВрдВрдХрд┐ рджреЛрдиреЛрдВ рд╣реБрдХ рдЕрдХреНрд╕рд░ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ рд╡реЗ рдмреЗрд╣рддрд░ рдкреНрд░рджрд░реНрд╢рди рдХрд░реЗрдВ used рдЗрд╕рд▓рд┐рдП рдЙрдиреНрд╣реЗрдВ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдирдорд╕реНрддреЗ, рдЗрд╕ рддрд░рд╣ рдХреЛрдб рдХреЛ рдкреНрд░рд╛рд░реВрдкрд┐рдд рдХреИрд╕реЗ рдХрд░реЗрдВ?
image

@ yaofly2012 GitHub рдлреЙрд░реНрдореЗрдЯреНрд╕ рдЙрд╕ рддрд░рд╣ рд╕реЗ рд▓рд┐рдВрдХ рдХрд░рддреЗ рд╣реИрдВ, рдпрджрд┐ рдЖрдк рдХрд┐рд╕реА рд╡рд┐рд╢рд┐рд╖реНрдЯ рдлрд╝рд╛рдЗрд▓ рд╕рдВрд╢реЛрдзрди рдФрд░ рд▓рд╛рдЗрди рдирдВрдмрд░реЛрдВ рд╕реЗ рд▓рд┐рдВрдХ рдХрд░рддреЗ рд╣реИрдВред

  1. рдПрдХ рдлрд╝рд╛рдЗрд▓ рдЦреЛрд▓реЛ
  2. рдПрдХ рд▓рд╛рдЗрди рдирдВрдмрд░ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ
  3. SHIFT рджрдмрд╛рдП рд░рдЦреЗрдВ рдФрд░ рдХрд┐рд╕реА рд╢реНрд░реЗрдгреА рдХрд╛ рдЪрдпрди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рд╕реА рдЕрдиреНрдп рдкрдВрдХреНрддрд┐ рд╕рдВрдЦреНрдпрд╛ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ
  4. рд╡рд░реНрддрдорд╛рди рд╕рдВрд╢реЛрдзрди рдореЗрдВ рдкрд┐рди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП "y" рдЯрд╛рдЗрдк рдХрд░реЗрдВ
  5. URL рдХреЛ GitHub рдкрд░ рдХреЙрдкреА + рдкреЗрд╕реНрдЯ рдХрд░реЗрдВ
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

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

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

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

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

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

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