React useEffect的理解与使用

Z时代
2024-01-10
分类：IT

避免重复循环渲染

利用useEffect接收一个数组作为第二个参数，将第二个参数作为dependence，每次渲染完DOM执行副作用函数时都会浅比较dependence渲染前后的值是否一致，不一致就执行副作用，反之就不执行；如果该dependence为一个空数组[]，即没有传入比较变化的变量，则比较结果永远都保持不变，那么副作用逻辑就只能执行一次。


useEffect(() => {
  setTimeout(() => {    
        setCounter(counter + 1);  
    }, 300)
}, []);

初此之外，如果我们还想通过点击刷新按钮实现获取外部数据但又不想造成死循环，那么可以通过一个变量作为“开关”，在实现目的的同时做到避免循环渲染DOM。

画动图太麻烦，各位看注释脑补😂


function App() {  const [count, setCount] = useState(0);  const [loading, setLoading] = useState(true); // loading作为开关  useEffect(() => {    if (loading) { // 注意这里只有当loading为true时才执行      setTimeout(() => {        setCount(count + 1);        setLoading(!loading); // 改变loading值      });    }  }, [loading]); // loading在这里作为dependence
  // 第一次DOM渲染完成后，loading为true，执行副作用函数，count值变为1，loading变为false，由于
  // 改变了state的值，会update，组件会再次render，但此时loading为false，不会执行setTimeout，
  // 避免了循环
  // 当点击Refresh刷新，loading由上一次的false变为了true，函数执行一次update
  // DOM更新完后执行useEffect，因为loading已经为true了，所以副作用函数可执行，count从1变为2，
  // loading又从true变为false，就这样交替进行。。。
  return (    <div>      <h3>{count}</h3>      <button        onClick={() => {          setLoading(true);        }}      >        Refresh      </button>    </div>  );}

关于副作用的清除

useEffect可以返回一个函数来作为清除副作用。


  useEffect(() => {    
    ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);  
    function clear(){
        ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
    }  
    return clear;
});

这里会涉及到useEffect执行和销毁的过程：