React Fiberã®ã¯ãŒã¯ã«ãŒããšãã®äžææ©èœã®è©³çްãªè§£èª¬ãè€éãªã¢ããªã±ãŒã·ã§ã³ã§ããã©ãŒãã³ã¹ãæé©åããããã®åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã«çŠç¹ãåœãŠãŸãã
React Fiberã®ã¯ãŒã¯ã«ãŒãäžæïŒåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ããã¹ã¿ãŒãã
React Fiberã¯ãReactã®å·®åæ€åºåŠçïŒreconciliationïŒã¢ã«ãŽãªãºã ãå®å šã«æžãçŽãããã®ã§ããReactã®åæããŒãžã§ã³ã«ãããããã©ãŒãã³ã¹ã®éçãç¹ã«è€éãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã倧ããªã³ã³ããŒãã³ãããªãŒãæ±ãéã®èª²é¡ã«å¯ŸåŠããããã«å°å ¥ãããŸãããReact Fiberã®éèŠãªé©æ°ã®äžã€ã¯ãã¬ã³ããªã³ã°ããã»ã¹ãäžæããã¿ã¹ã¯ããã®éèŠåºŠã«åºã¥ããŠåªå é äœä»ãããèœåã§ããããã«ãããèšç®éã®å€ãæäœãå®è¡ããŠãããšãã§ãããReactã¯å¿çæ§ãç¶æããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸãã
åŸæ¥ã®Reactã®å·®åæ€åºåŠçãçè§£ãã
Fiber以åãReactã®å·®åæ€åºåŠçã¯åæçã§ãããããã¯ãReactãã³ã³ããŒãã³ãããªãŒã®ã¬ã³ããªã³ã°ãéå§ãããšããã©ãŠã¶ããŠãŒã¶ãŒå ¥åã«å¿çãããä»ã®ã¿ã¹ã¯ãå®è¡ãããããåã«ãããã»ã¹å šäœãå®äºããªããã°ãªããªãããšãæå³ããŸãããããã«ãããç¹ã«å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ãæ±ãéã«ãUIãå¿çããªããªãç¶æ³ãçºçããå¯èœæ§ããããŸãããReactã倧ããªãªã¹ããæŽæ°ããŠããéã«ãŠãŒã¶ãŒãå ¥åãã£ãŒã«ãã«ã¿ã€ãã³ã°ããå Žé¢ãæ³åããŠã¿ãŠãã ãããã¿ã€ãã³ã°äœéšã¯é ããã€ã©ã€ã©ãããã®ã«ãªããããããŸããã
ãã®åæçãªæ§è³ªãããã«ããã¯ãçã¿åºããŸãããæŽæ°ãå¿ èŠãªã³ã³ããŒãã³ãããšã«ã³ãŒã«ã¹ã¿ãã¯ãç©ã¿äžãããæŽæ°ãå®äºãããŸã§ã¡ã€ã³ã¹ã¬ããããããã¯ããŠããŸãããWebã¢ããªã±ãŒã·ã§ã³ãè€éåããå¿çæ§ã«å¯ŸãããŠãŒã¶ãŒã®æåŸ ãé«ãŸãã«ã€ããŠããã®åé¡ã¯ãŸããŸãæ·±å»ã«ãªããŸããã
React Fiberã®å°å ¥ïŒå·®åæ€åºåŠçãžã®æ°ããã¢ãããŒã
React Fiberã¯ãã¬ã³ããªã³ã°ããã»ã¹ãããå°ããªéåæã®äœæ¥åäœã«åå²ããããšã§ãåæçãªå·®åæ€åºåŠçã®éçã«å¯ŸåŠããŸãããããã®äœæ¥åäœã¯ããã¡ã€ããŒããšåŒã°ããŸããåãã¡ã€ããŒã¯ã³ã³ããŒãã³ãã€ã³ã¹ã¿ã³ã¹ã衚ããReactã¯ãã®åªå 床ã«åºã¥ããŠãã¡ã€ããŒã®äœæ¥ãäžæåæ¢ãåéããŸãã¯ç Žæ£ããããšãã§ããŸãããã®ã¬ã³ããªã³ã°ããã»ã¹ãäžæããèœåããããReact Fiberãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãå®çŸããéµã§ãã
React Fiberã®äž»èŠæŠå¿µ
- ãã¡ã€ããŒïŒ å®è¡ãããã¹ãäœæ¥åäœã衚ããããªãŒæ§é å ã®ã³ã³ããŒãã³ãã«é¡äŒŒããŠããŸããåãã¡ã€ããŒã¯ãã³ã³ããŒãã³ãã®ç¶æ ãpropsãããã³ä»ã®ã³ã³ããŒãã³ããšã®é¢ä¿ã«é¢ããæ å ±ãä¿æããŸãã
- ã¯ãŒã¯ã«ãŒãïŒ React Fiberã®äžæ žã§ããããã¡ã€ããŒã®åŠçãšDOMã®æŽæ°ãæ åœããŸãã
- ã¹ã±ãžã¥ãŒã©ïŒ äœæ¥ã®åªå é äœä»ããšå®è¡ã管çããŸãã
- åªå 床ã¬ãã«ïŒ ã¿ã¹ã¯ããã®éèŠåºŠã«åºã¥ããŠåé¡ããããã«äœ¿çšãããŸãïŒäŸïŒãŠãŒã¶ãŒå ¥åã€ãã³ãã¯ããã¯ã°ã©ãŠã³ãæŽæ°ãããé«ãåªå 床ãæã¡ãŸãïŒã
React Fiberã®ã¯ãŒã¯ã«ãŒã
React Fiberã®ã¯ãŒã¯ã«ãŒãã¯ãæ°ãã差忀åºåŠçã¢ã«ãŽãªãºã ã®äžå¿ã§ããã³ã³ããŒãã³ãããªãŒãèµ°æ»ãããã¡ã€ããŒãåŠçããDOMãæŽæ°ãã責任ãè² ããŸããã¯ãŒã¯ã«ãŒãã¯é£ç¶çãªãµã€ã¯ã«ã§åäœããåžžã«è¡ãã¹ãäœæ¥ããããã確èªããŠããŸããéèŠãªã®ã¯ãããåªå 床ã®é«ãã¿ã¹ã¯ãçºçããå Žåãã¯ãŒã¯ã«ãŒãã¯ãã€ã§ãäžæã§ãããšããããšã§ããããã¯ã¹ã±ãžã¥ãŒã©ã䜿çšããããšã§å®çŸãããŸãã
ã¯ãŒã¯ã«ãŒãã®ãã§ãŒãº
ã¯ãŒã¯ã«ãŒãã¯äž»ã«2ã€ã®ãã§ãŒãºã§æ§æãããŸãïŒ
- ã¬ã³ããŒãã§ãŒãºïŒ ãã®ãã§ãŒãºã§ã¯ãDOMã«ã©ã®ãããªå€æŽãå¿ èŠããæ±ºå®ããŸããReactã¯ã³ã³ããŒãã³ãããªãŒãèµ°æ»ããçŸåšã®ç¶æ ãšæ°ããç¶æ ãæ¯èŒããæŽæ°ãå¿ èŠãªã³ã³ããŒãã³ããç¹å®ããŸãããã®ãã§ãŒãºã¯çŽç²ã§ãããå¯äœçšãªãã«äžæåæ¢ãäžæ¢ããŸãã¯åéããããšãã§ããŸããDOMã«é©çšããå¿ èŠããããã¹ãŠã®å€æŽã®é£çµãªã¹ãã§ããããšãã§ã¯ããªã¹ãããäœæããŸãã
- ã³ããããã§ãŒãºïŒ ãã®ãã§ãŒãºã§ã¯ã倿ŽãDOMã«é©çšããŸãããã®ãã§ãŒãºã¯åæçã§ãããäžæããããšã¯ã§ããŸãããUIã®äžè²«æ§ã確ä¿ããããã«éåžžã«éèŠã§ãã
äžæã®ä»çµã¿
ã¹ã±ãžã¥ãŒã©ã¯äžæã®ç®¡çã«ãããŠéèŠãªåœ¹å²ãæãããŸãããŠãŒã¶ãŒå ¥åããããã¯ãŒã¯ãªã¯ãšã¹ããããã¯ã°ã©ãŠã³ãæŽæ°ãªã©ã®åã¿ã¹ã¯ã«åªå 床ã¬ãã«ãå²ãåœãŠãŸããã¯ãŒã¯ã«ãŒãã¯åžžã«ã¹ã±ãžã¥ãŒã©ããã§ãã¯ããŠãå®è¡ãåŸ ã£ãŠããããåªå 床ã®é«ãã¿ã¹ã¯ããªãã確èªããŸããããåªå 床ã®é«ãã¿ã¹ã¯ãèŠã€ãã£ãå Žåãã¯ãŒã¯ã«ãŒãã¯çŸåšã®ã¿ã¹ã¯ãäžæåæ¢ãããã©ãŠã¶ã«å¶åŸ¡ãæž¡ããããåªå 床ã®é«ãã¿ã¹ã¯ã®å®è¡ãèš±å¯ããŸããããåªå 床ã®é«ãã¿ã¹ã¯ãå®äºãããšãã¯ãŒã¯ã«ãŒãã¯äžæãããšããããåã®ã¿ã¹ã¯ãåéã§ããŸãã
ãããäŸãããªããããªãã倧ããªã¹ãã¬ããã·ãŒãã§äœæ¥ããŠããïŒã¬ã³ããŒãã§ãŒãºïŒãšãã«ãäžåžããé»è©±ãããã£ãŠããïŒããåªå 床ã®é«ãã¿ã¹ã¯ïŒãããªãã®ã§ããããªãã¯ããã«ã¹ãã¬ããã·ãŒãã®äœæ¥ãæ¢ããŠé»è©±ã«åºãŸããé»è©±ãçµãã£ãããã¹ãã¬ããã·ãŒãã«æ»ããäžæãããšããããäœæ¥ãç¶ããŸãã
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ãReact Fiberã®äžææ©èœãããããäž»èŠãªå©ç¹ã§ããããã«ãããReactã¯ã¿ã¹ã¯ããã®éèŠåºŠã«åºã¥ããŠåªå é äœä»ãããæãéèŠãªã¿ã¹ã¯ãæåã«å®è¡ãããããã«ä¿èšŒããŸããããã¯ãããå¿çæ§ãé«ãã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
åªå 床ã®çš®é¡
Reactã¯ããã€ãã®åªå 床ã¬ãã«ãå®çŸ©ããŠãããããããéèŠåºŠãç°ãªããŸãïŒ
- 峿åªå åºŠïŒ ãŠãŒã¶ãŒå ¥åã€ãã³ããªã©ãå³åº§ã«å®è¡ããå¿ èŠãããã¿ã¹ã¯ã«äœ¿çšãããŸãã
- ãŠãŒã¶ãŒããããã³ã°åªå åºŠïŒ ã¢ãã¡ãŒã·ã§ã³ããã©ã³ãžã·ã§ã³ãªã©ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ããããã¯ããã¿ã¹ã¯ã«äœ¿çšãããŸãã
- éåžžåªå åºŠïŒ ã»ãšãã©ã®æŽæ°ã«äœ¿çšãããŸãã
- äœåªå åºŠïŒ ããã¯ã°ã©ãŠã³ãæŽæ°ãåæãªã©ãæéçå¶çŽãå³ãããªãã¿ã¹ã¯ã«äœ¿çšãããŸãã
- ã¢ã€ãã«åªå åºŠïŒ ããŒã¿ã®ããªãã§ãããªã©ããã©ãŠã¶ãã¢ã€ãã«ç¶æ ã®ãšãã«å®è¡ã§ããã¿ã¹ã¯ã«äœ¿çšãããŸãã
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã®å®äŸ
ãŠãŒã¶ãŒãå ¥åãã£ãŒã«ãã«ã¿ã€ãã³ã°ããŠããéã«ãReactãå€§èŠæš¡ãªããŒã¿ãªã¹ããæŽæ°ããŠããã·ããªãªãæ³åããŠã¿ãŠãã ãããReact Fiberããªããã°ãReactã¯ãªã¹ãã®æŽæ°ã§å¿ãããããã¿ã€ãã³ã°äœéšã¯é ããã€ã©ã€ã©ãããã®ã«ãªãå¯èœæ§ããããŸããããããReact Fiberã䜿çšãããšãReactã¯ãªã¹ãã®æŽæ°ããããŠãŒã¶ãŒå ¥åã€ãã³ããåªå ã§ããŸããã€ãŸããReactã¯ãªã¹ãã®æŽæ°ãäžæåæ¢ãããŠãŒã¶ãŒå ¥åãåŠçããŠãããªã¹ãã®æŽæ°ãåéããŸããããã«ãããã¿ã€ãã³ã°äœéšãã¹ã ãŒãºã§å¿çæ§ã®é«ããã®ã«ä¿ãããŸãã
å¥ã®äŸãšããŠããœãŒã·ã£ã«ã¡ãã£ã¢ã®ãã£ãŒããèããŠã¿ãŸããããæ°ããã³ã¡ã³ãã®è¡šç€ºæŽæ°ã¯ãå€ããŠé¢é£æ§ã®äœãã³ã³ãã³ãã®èªã¿èŸŒã¿ãããåªå ãããã¹ãã§ããFiberã¯ãã®åªå é äœä»ããå¯èœã«ãããŠãŒã¶ãŒãææ°ã®ã¢ã¯ãã£ããã£ãæåã«èŠãããããã«ããŸãã
éçºè ã«ãšã£ãŠã®å®çšçãªæå³
React Fiberã®åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãçè§£ããããšã¯ãéçºè ã«ãšã£ãŠããã€ãã®å®çšçãªæå³ãæã¡ãŸãïŒ
- ã¯ãªãã£ã«ã«ãã¹ã®æé©åïŒ æãéèŠãªãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãç¹å®ããããããæé«ã®åªå 床ã§åŠçãããããã«ããŸãã
- éèŠã§ãªãã¿ã¹ã¯ã®å»¶æïŒ ããã¯ã°ã©ãŠã³ãæŽæ°ãåæãªã©ã®éèŠã§ãªãã¿ã¹ã¯ããããäœãåªå 床ã¬ãã«ã«å»¶æããŸãã
- `useDeferredValue`ããã¯ã®äœ¿çšïŒ React 18ã§å°å ¥ããããã®ããã¯ã䜿çšãããšãUIã®éèŠã§ãªãéšåã®æŽæ°ãå»¶æã§ããŸããããã¯äœæããã©ãŒãã³ã¹ãåäžãããã®ã«éåžžã«äŸ¡å€ããããŸãã
- `useTransition`ããã¯ã®äœ¿çšïŒ ãã®ããã¯ã䜿çšãããšãæŽæ°ããã©ã³ãžã·ã§ã³ãšããŠããŒã¯ã§ããŸããããã«ãããæŽæ°ãåŠçãããŠããéãUIã®å¿çæ§ãä¿ã€ããã«Reactã«æç€ºããŸãã
- é·æéå®è¡ãããã¿ã¹ã¯ã®åé¿ïŒ é·æéå®è¡ãããã¿ã¹ã¯ããããå°ãã管çãããããã£ã³ã¯ã«åå²ããŠãã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãåé¿ããŸãã
React Fiberãšåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã®å©ç¹
React Fiberãšåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ãããã€ãã®éèŠãªå©ç¹ãæäŸããŸãïŒ
- å¿çæ§ã®åäžïŒ èšç®éã®å€ãæäœãå®è¡ããŠãããšãã§ããReactã¯å¿çæ§ãç¶æã§ããŸãã
- ããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒ è€éãªã¢ããªã±ãŒã·ã§ã³ãšå¯Ÿè©±ããŠãããšãã§ãããŠãŒã¶ãŒã¯ããã¹ã ãŒãºã§æµåçãªUIãäœéšã§ããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒ Reactã¯ã¬ã³ããªã³ã°ããã»ã¹ãæé©åããäžèŠãªæŽæ°ãåé¿ã§ããŸãã
- äœæããã©ãŒãã³ã¹ã®åäžïŒ 衚瀺ãããæŽæ°ãåªå ããéèŠåºŠã®äœãã¿ã¹ã¯ãå»¶æããããšã§ãReactã¯ã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžãããŸãã
課é¡ãšèæ ®äºé
React Fiberã¯å€§ããªå©ç¹ãæäŸããŸãããçæãã¹ãããã€ãã®èª²é¡ãèæ ®äºé ããããŸãïŒ
- è€éæ§ã®å¢å ïŒ React Fiberã®ã¢ãŒããã¯ãã£ãšã¯ãŒã¯ã«ãŒããçè§£ããããšã¯é£ããå ŽåããããŸãã
- ãããã°ïŒ éåæã¬ã³ããªã³ã°ã®ãããã°ã¯ãåæã¬ã³ããªã³ã°ã®ãããã°ãããè€éã«ãªãå¯èœæ§ããããŸãã
- äºææ§ïŒ React Fiberã¯ã»ãšãã©ã®æ¢åã®Reactã³ãŒããšåŸæ¹äºææ§ããããŸãããäžéšã®å€ãã³ã³ããŒãã³ãã¯æŽæ°ãå¿ èŠã«ãªãå ŽåããããŸããã¢ããã°ã¬ãŒãã®éã«ã¯åžžã«æ éãªãã¹ããå¿ èŠã§ãã
- 飢é€ç¶æ ã®å¯èœæ§ïŒ åžžã«ããåªå 床ã®é«ãã¿ã¹ã¯ãåŸ æ©ããŠããå Žåãäœåªå 床ã®ã¿ã¹ã¯ãå šãå®è¡ãããªãã·ããªãªãäœæããå¯èœæ§ããããŸãããããé¿ããããã«ã¯ãé©åãªåªå é äœä»ããäžå¯æ¬ ã§ãã
äžçäžããã®äºäŸ
React Fiberã®å©ç¹ã瀺ãããããã®äžççãªäºäŸãèããŠã¿ãŸãããïŒ
- Eã³ããŒã¹ãã©ãããã©ãŒã ïŒã°ããŒãã«ïŒïŒ æ°åã®ååãæ±ãEã³ããŒã¹ãµã€ãã¯ãReact Fiberã䜿çšããŠãåå詳现ã®è¡šç€ºããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒã«ãŒããžã®è¿œå ãçµæã®ãã£ã«ã¿ãªã³ã°ïŒããååæšèŠã®æŽæ°ãšãã£ãéèŠåºŠã®äœãã¿ã¹ã¯ãããåªå ãããããšãã§ããŸããããã«ããããŠãŒã¶ãŒã®å Žæãã€ã³ã¿ãŒãããé床ã«é¢ããããé«éã§å¿çæ§ã®é«ãã·ã§ããã³ã°äœéšãä¿èšŒãããŸãã
- éèååŒãã©ãããã©ãŒã ïŒãã³ãã³ããã¥ãŒãšãŒã¯ãæ±äº¬ïŒïŒ æ¥éã«å€åããåžå ŽããŒã¿ã衚瀺ãããªã¢ã«ã¿ã€ã ååŒãã©ãããã©ãŒã ã¯ãçŸåšã®äŸ¡æ Œãæ³šææ¿ã®æŽæ°ããéå»ã®ãã£ãŒãããã¥ãŒã¹ãã£ãŒãã®è¡šç€ºãããåªå ãããå¿ èŠããããŸããReact Fiberã¯ãã®åªå é äœä»ããå¯èœã«ãããã¬ãŒããŒãæãéèŠãªæ å ±ã«æå°éã®é å»¶ã§ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
- æè²ãã©ãããã©ãŒã ïŒã€ã³ãããã©ãžã«ãã¢ã¡ãªã«ïŒïŒ ã€ã³ã¿ã©ã¯ãã£ããªæŒç¿ããããªè¬çŸ©ãåãããªã³ã©ã€ã³åŠç¿ãã©ãããã©ãŒã ã¯ãReact Fiberã䜿çšããŠãæŒç¿äžã®ãŠãŒã¶ãŒå ¥åããããªã®ã¹ããªãŒãã³ã°åçããã³ãŒã¹é²æããŒã®æŽæ°ãšãã£ãéèŠåºŠã®äœãã¿ã¹ã¯ãããåªå ãããããšãã§ããŸããããã«ãããã€ã³ã¿ãŒãããæ¥ç¶ãäžå®å®ãªå°åã®åŠçã«ããã¹ã ãŒãºã§é åçãªåŠç¿äœéšãä¿èšŒãããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ïŒå šäžçïŒïŒ ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã¯ãæ°ããæçš¿ãéç¥ã®è¡šç€ºããå€ãã³ã³ãã³ãã®èªã¿èŸŒã¿ãããã¯ã°ã©ãŠã³ãã§ã®ããŒã¿åæãããåªå ãããå¿ èŠããããŸããReact Fiberã¯ãããã«ã¯å¿ èŠãªããåéã®ææ¡ããªã©ããã£ããæŽæ°ããäžæ¹ã§ããŠãŒã¶ãŒã«ãæ°çæ å ±ãã衚瀺ããããšãåªå ãããããšãã§ããŸãã
Fiberã䜿çšããŠReactã¢ããªã±ãŒã·ã§ã³ãæé©åããããã®ãã¹ããã©ã¯ãã£ã¹
- ã¢ããªã±ãŒã·ã§ã³ã®ãããã¡ã€ãªã³ã°ïŒ React DevToolsã䜿çšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãReactãã¬ã³ããªã³ã°ã«æãæéãè²»ãããŠããç®æãç¹å®ããŸããããã«ãããé床äœäžã®åå ãšãªã£ãŠããå¯èœæ§ã®ããã³ã³ããŒãã³ããç¹å®ã§ããŸãã
- ã¡ã¢åæè¡ïŒ `React.memo`ã`useMemo`ã`useCallback`ãå©çšããŠãã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸãããããã®æè¡ã«ãããé«ã³ã¹ããªèšç®ãæ¯èŒã®çµæããã£ãã·ã¥ããå ¥åã倿Žãããå Žåã«ã®ã¿åã¬ã³ããªã³ã°ããããšãã§ããŸãã
- ã³ãŒãåå²ïŒ ã¢ããªã±ãŒã·ã§ã³ãããªã³ããã³ãã§èªã¿èŸŒããå°ããªãã£ã³ã¯ã«åå²ããŸããããã«ãããåæããŒãæéãççž®ãããã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžããŸããã³ãŒãåå²ãå®è£ ããã«ã¯`React.lazy`ãš`Suspense`ã䜿çšããŸãã
- å€§èŠæš¡ãªã¹ãã®ä»®æ³åïŒ å€§èŠæš¡ãªããŒã¿ãªã¹ããã¬ã³ããªã³ã°ããŠããå Žåã¯ãä»®æ³åæè¡ã䜿çšããŠãçŸåšç»é¢ã«è¡šç€ºãããŠããã¢ã€ãã ã®ã¿ãã¬ã³ããªã³ã°ããŸãã`react-window`ã`react-virtualized`ã®ãããªã©ã€ãã©ãªã¯ãä»®æ³åãå¹ççã«å®è£ ããã®ã«åœ¹ç«ã¡ãŸãã
- ãããŠã³ã¹ãšã¹ããããªã³ã°ïŒ ãŠãŒã¶ãŒå ¥åããã®ä»ã®ã€ãã³ãã«ãã£ãŠããªã¬ãŒãããæŽæ°ã®é »åºŠãå¶éããããã«ããããŠã³ã¹ãšã¹ããããªã³ã°ãå®è£ ããŸããããã«ãããéå°ãªåã¬ã³ããªã³ã°ãé²ããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- ç»åãšã¢ã»ããã®æé©åïŒ ç»åããã®ä»ã®ã¢ã»ãããå§çž®ããŠãã¡ã€ã«ãµã€ãºãåæžããèªã¿èŸŒã¿æéãæ¹åããŸããã¬ã¹ãã³ã·ãç»åã䜿çšããŠããŠãŒã¶ãŒã®ç»é¢ãµã€ãºã«å¿ããŠç°ãªããµã€ãºã®ç»åãæäŸããŸãã
- ããã©ãŒãã³ã¹ã®å®æçãªç£èŠïŒ ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããçºçããå¯èœæ§ã®ããæ°ããããã«ããã¯ãç¹å®ããŸããGoogle PageSpeed InsightsãWebPageTestãªã©ã®ããã©ãŒãã³ã¹ç£èŠããŒã«ã䜿çšããŠãäž»èŠãªã¡ããªã¯ã¹ã远跡ããæ¹åã®äœå°ãããé åãç¹å®ããŸãã
çµè«
React Fiberã®ã¯ãŒã¯ã«ãŒãäžæãšåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ã髿§èœã§å¿çæ§ã®é«ãReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åŒ·åãªããŒã«ã§ããReact Fiberã®ä»çµã¿ãçè§£ãããã¹ããã©ã¯ãã£ã¹ãé©çšããããšã§ãéçºè ã¯è€éãªUIãå€§èŠæš¡ãªããŒã¿ã»ãããæ±ãå Žåã§ããã¹ã ãŒãºã§æµåçããã€é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµãåºãããšãã§ããŸããReactãé²åãç¶ããäžã§ãFiberã®ã¢ãŒããã¯ãã£äžã®æ¹åã¯ãã°ããŒãã«ãªèŠèŽè ã®èŠæ±ã«å¿ããçŸä»£çãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åºç€ã§ããç¶ããã§ãããã
ãã®ã¬ã€ãã§æŠèª¬ãããæŠå¿µãšæè¡ãåãå ¥ããããšã§ãReact Fiberã®ããã³ã·ã£ã«ãæå€§éã«æŽ»çšãã倿§ãªãã©ãããã©ãŒã ãããã€ã¹ã§åè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠãŒã¶ãŒæºè¶³åºŠãåäžãããããžãã¹ã®æåãæšé²ããããšãã§ããŸããæä»£ã®å ãè¡ããçã«çŽ æŽãããWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«ãReactéçºã®é²åããç¶æ³ãç¶ç¶çã«åŠã³ãé©å¿ããŠããããšãå¿ããªãã§ãã ããã