useRefについて調べてみた

2019.09.04 React LT会の発表資料です。
https://informetis.connpass.com/event/142183/

Transcript

1. useRefʹ͍ͭͯௐ΂ͯΈͨ
   @shibe97
   2019.9.4 React LTձ
   

   View Slide

2. ࣲా ࿨ف
   ΢ΥϯλגࣜձࣾͰmicroCMSͱ͍͏ϔουϨεCMSΛ
   ࡞͍ͬͯ·͢ɻ
   ීஈ͸React࢖͍Ͱɺ࠷ۙVue΋ͪΐͬͱ৮Γ·͢ɻ
   @shibe97
   

   View Slide

3. View Slide

4. ೖྗϑΥʔϜͱAPIΛඵͰ࡞੒Ͱ͖ΔαʔϏε
   

   View Slide

5. React Hooksͱ͸
   • React 16.8͔Β௥Ճ͞Εͨػೳ
   • Functional ComponentʹClass Componentͱಉ༷ͷॲཧ͕

   Ͱ͖ΔΑ͏ʹ௥Ճ͞Εͨ
   • state΍ϥΠϑαΠΫϧ૬౰ͷ΋ͷ
   

   View Slide

6. useRefͱ͸
   • DOMͷࢀরʹ࢖͑Δ
   • ࠶ඳըͤ͞ͳ͍ม਺؅ཧ͕Ͱ͖Δ
   

   View Slide

7. DOMͷࢀরʹ࢖͑ΔʢެࣜྫΑΓʣ
   function TextInputWithFocusButton() {
   const inputEl = useRef(null);
   const onButtonClick = () => {
   // `current` points to the mounted text input element
   inputEl.current.focus();
   };
   return (
   <>
   
   Focus the input
   >
   );
   }
   

   View Slide

8. ࠶ඳըͤ͞ͳ͍ม਺؅ཧ͕Ͱ͖Δ
   • refΦϒδΣΫτ͸஋ΛcurrentϓϩύςΟʹอ࣋͢Δ
   • ࠶ඳը࣌΋ɺຖճಉ͡refΦϒδΣΫτΛฦ͢
   • currentʹ௚઀୅ೖͯ͠΋࠶ඳը͸͞Εͳ͍
   {
   current: initialValue
   }
   

   View Slide

9. useRefͷ࣮૷
   function mountRef(initialValue: T): {current: T} {
   const hook = mountWorkInProgressHook();
   const ref = {current: initialValue};
   if (__DEV__) {
   Object.seal(ref);
   }
   hook.memoizedState = ref;
   return ref;
   }
   function updateRef(initialValue: T): {current: T} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
   }
   ϝϞϦ্ͷ஋Λຖճฦ͚ͩ͢
   ϝϞϦ্ͰΦϒδΣΫτΛอ࣋
   currentϓϩύςΟʹ஋Λอ࣋
   

   View Slide

10. ͜ͷ࢓૊ΈΛར༻Ͱ͖ΔྫͬͯͳΜͩΖ͏
    
    

    View Slide

11. DOMͩʂ
    
    

    View Slide

12. inputཁૉͷྫ: useState
    function TextInput() {
    const [ text, setText ] = useState(‘’);
    const onChange = useCallback(e => {
    setText(e.target.value);
    };
    return (
    
    );
    }
    ςΩετΛมߋ͢Δͨͼʹඳը͞ΕΔ
    

    View Slide

13. inputཁૉͷྫ: useRefʢcurrent௚ࢦఆʣ
    function TextInput() {
    const { current } = useRef(null);
    const onChange = useCallback(e => {
    current = e.target.value;
    });
    return (
    
    );
    }
    ςΩετΛมߋͯ͠΋࠶ඳը͞Εͳ͍
    

    View Slide

14. ͋ΕɺͰ΋͜Εͬͯɾɾɾ
    
    

    View Slide

15. inputཁૉͷྫ: useRefʢDOMࢀরʣ
    function TextInput() {
    const inputEl = useRef(null);
    return (
    
    );
    }
    ΋ͪΖΜ͜ͷํ๏΋࠶ඳը͞Εͳ͍
    

    View Slide

16. ·ͱΊ
    • useRef͸஋Λอ࣋Ͱ͖Δ্ʹɺมߋͯ͠΋࠶ඳը͞Εͳ͍
    • inputཁૉʹ͸useStateΑΓuseRefͷํ͕ύϑΥʔϚϯε͸ྑ͍
    • ΋ͪΖΜControlled Componentʹ͍ͨ͠৔߹͸useStateʹ͢Δ
    ඞཁ͋Γ
    

    View Slide

17. ͓·͚
    

    View Slide

18. useRef͸ΦϒδΣΫτΛࢀর͍ͯ͠Δ͔Β
    ಺෦ϓϩύςΟมߋͨ͠ͱ͜ΖͰ࠶ඳը͞Εͳ͍ΜͩΖ͏
    
    

    View Slide

19. Α͠ɺLTωλ͸͜ΕͰ͍͜͏ʂ
    
    

    View Slide

20. useRefͷ࣮૷
    function mountRef(initialValue: T): {current: T} {
    const hook = mountWorkInProgressHook();
    const ref = {current: initialValue};
    if (__DEV__) {
    Object.seal(ref);
    }
    hook.memoizedState = ref;
    return ref;
    }
    function updateRef(initialValue: T): {current: T} {
    const hook = updateWorkInProgressHook();
    return hook.memoizedState;
    }
    ϝϞϦ্ͷ஋Λຖճฦ͚ͩ͢
    ϝϞϦ্ͰΦϒδΣΫτΛอ࣋
    currentϓϩύςΟʹ஋Λอ࣋
    

    View Slide

21. ·ͬͨؔ͘܎ͳ͔ͬͨ
    
    

    View Slide

22. Thanks :)
    @shibe97
    

    View Slide