将 componentDidUpdate componentDidMount 转换为 hooks

Question

Learning react by coding, trying to convert this code into hooks version, but i'm not getting any error and still code is not working ( class version works), just want to have some advice or help if i have converted it in right way or not?

english is not my mother language so could be mistakes.

class:

 componentDidMount() { this.updateCanvas(); const img = this.refs.CameraImage; img.onload = this.updateCanvas.bind(this); } componentDidUpdate(prevProps, prevState, snapshot) { this.updateCanvas(); } componentWillUnmount() { clearInterval(this.snapshotInterval); }

converted version:

 useEffect(() => { updateCanvas(); const img = CameraImage.current; img.onload = updateCanvas; return () => { img.onload = null; }; });

Answer 1

You are right according to React docs about hooks :

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
});

And an example of converted componentWillUnmount to hooks :

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
});

And code would like this:

useEffect(() => {
    //   componentDidMount run once when the component is mounted
    this.updateCanvas();
    const img = refs.CameraImage;
    img.onload = updateCanvas;      

    // will be called on component unmount 
    return () => {
        clearInterval(this.snapshotInterval);
    }
})

Answer 2

1 - you didn't pass an array into the useEffect Hook , so your component will continuously reload repeatedly.

2 - if you pass an empty array, then you are not watching any variables, and therefore it will only update the state on the first render, exactly like componentDidMount . in your case you are watching snapshot variable so add it as a dependency. So just change your code like this:

useEffect(() => {
    updateCanvas();
    const img = CameraImage.current;
    img.onload = updateCanvas;

    return () => {
      img.onload = null;
    };
  }, [snapshot]);