其他分享
首页 > 其他分享> > Hooks基础-------useEffect基本用法

Hooks基础-------useEffect基本用法

作者:互联网

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

标签:Hooks,-------,ChatAPI,handleStatusChange,props,useEffect,id,friend
来源: https://blog.csdn.net/qq_41890177/article/details/121921917