useEffect 可以在组件渲染后实现各种不同的副作用。通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。

1、只有一个参数时

相当于componentDidMount和componentDidUpdate

useEffect(() => {
    console.log("count", count);
});

2、有两个参数时

2-1 第二个参数是[]时，相当于componentDidMount

useEffect(() => {
    console.log("num", num);
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

2-2 第二个参数有值时，只有当[]中的值改变时useEffect才会生效

useEffect(() => {
    console.log("count", count);
    console.log("num", num);
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [num]);

3、卸载

useEffect(() => {
    console.log("login");
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // 当props.friend.id发生变化时，将会先进行清除工作
    return () => {
      console.log("logout");
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id);
    };
}, [props.friend.id]);

整个过程就像

// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 首次加载运行第一个 effect
​
// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 先清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 再运行下一个 effect
​
// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 先清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 再运行下一个 effect
​
// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect