קורס React 2020 שיעור דוגמא: עבודה עם Youtube API

[ynonp]

---

זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/youtube-api

[digital]

למה צריך את const [isPlaying, setIsPlaying] = useState(false);
אם אפשר להשתמש פשוט בפונקציות פשוטות לplay וpasue כמו שעשיתי פה

function YoutubePlayer(props) {
  const [videoId, setVideoId] = useState('M7lc1UVf-VE');
  const [isPlaying, setIsPlaying] = useState(false);
  const divRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(function () {
    playerRef.current = YouTubePlayer(divRef.current);
  }, []);

  useEffect(function () {
    const player = playerRef.current;
    player.loadVideoById(videoId);
    player.playVideo();
  }, [videoId]);

  function pause() {
    playerRef.current.pauseVideo();
  }
  function play() {
    playerRef.current.playVideo();
  }

  return (
    <div>
      <div><input type="text" value={videoId} onChange={(e) => setVideoId(e.target.value)} /></div>
      <div><button onClick={play}>start</button><button onClick={pause}>stop</button></div>
      <div className='player-div' ref={divRef} />
    </div>
  );
}

[ynonp]

הי,

לא צריך

אבל הרבה פעמים רוצים.

שמירת המידע בסטייט תעזור לנו להשתמש במידע הזה בקומפוננטה, למשל אם אני יודע שסרט מנגן עכשיו אולי אני רוצה להציג ממשק שונה מאשר אם הסרט ב pause.