Javascript (React_基本的なこと04)

■useRef, useEffectの試し。
チュートリアル部分を読み進めて、useRef, useEffectという新しいフックが出てきたのでその試し。少し使ってみて、useRefはコンポーネント上に出てこない変数の管理、useEffectは画面が表示された後の処理といったイメージ。

ウェブサイトでは動画の再生、停止を行うサンプルがあったので、それを基に修正や実行をしつつ挙動を確認していった。
サンプル画面としては下のような感じ。BtnAで下の動画の再生、停止ができる。BtnB、BtnCはPlayを押した数を表示する。

コードが次。

import { useState, useRef, useEffect } from 'react'; 
 
export default function App() { 
    const [isPly, setIsPlaying] = useState(false); 
    const ref = useRef(null); 
    const refCnt = useRef(0); 
    const [state, setState] = useState(0); 
 
    useEffect(() => { 
        if (isPly) { 
            ref.current.play(); 
            refCnt.current = refCnt.current + 1;; 
        } else { 
            ref.current.pause(); 
        } 
    }); 
 
    function refSample() { 
        setIsPlaying(!isPly); 
    /*   if (isPly) { 
            ref.current.play() 
            refCnt.current = refCnt.current + 1;; 
            refCnt.current = refCnt.current + 1;; 
        } else { 
            ref.current.pause(); 
        } */ 
    } 
 
    function showCnt() { 
        setState(refCnt.current); 
    } 
 
    function showCnt2() { 
    } 
 
    return ( 
        <> 
            <p> 
                <button onClick={refSample} > 
                    BtnA+{isPly ? 'Pause' : 'Play'} 
                </button> 
            </p> 
            <p> 
                <button onClick={showCnt} > 
                    BtnB+{state} 
                </button> 
                <button onClick={showCnt2} > 
                    BtnC+{refCnt.current} 
                </button> 
            </p> 
            <p> 
                <video ref={ref} src="/sample_mov1.mp4" width='400' loop playsInline />; 
            </p> 
        </> 
    ); 
}

実質的には、ウェブサイトのコードと同じ。Playボタンを押すと動画が開始され同時にボタンの表記がPauseになる。isPlyの初期値はfalseなので、BtnAボタンを押すと、refSample関数が実行され、setIsPlayingでTrueが設定される。最後にuseEffectが実行され、ref.current.play()が実行されるよう。

useEffectの代わりにコメントアウトした個所だけでも動画の再生、停止はできたが、setIsPlayingはすぐには実行されなかった。その後の分岐ではFalseのままと認定されるようで、初めのクリックではref.current.pause()が実行された。

useRef, useEffectは外部システムとの連携に使用できるとのことで、例えば、jQueryは表示されたDOM要素に対して処理を行うので、表示が完了した後のuseEffect内で使用するといった使い方ができそう。

チュートリアルはこのくらいにして、Reactと他のライブラリを組み合わせて何か作ってみたい。