React useEffect的理解与使用

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

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(() => {    
    ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);  
    function clear(){
        ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
    }  
    return clear;
});