import React, { useState, useEffect } from 'react'

export default function MultiEffectHookDemo() {
  const [count, setCount] = useState(0);
  const [isLogin, setIsLogin] = useState(true);
  // 默认情况下只要组件重新渲染useEffect 都会重新执行一下
  useEffect(() => {
    console.log("修改DOM", count);
  }, [count]);

  useEffect(() => {
    console.log("订阅事件");
  }, []);

  useEffect(() => {
    console.log("网络请求");
  }, []);

  return (
    <div>
      <h2>MultiEffectHookDemo</h2>
      <h2>{count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <h2>{isLogin ? "coderwhy" : "未登录"}</h2>
      <button onClick={e => setIsLogin(!isLogin)}>登录/注销</button>
    </div>
  )
}

useEffect 函数最后如果不添加状态数组，则默认为每一次加载组件时都会执行useEffect；为了避免加载组件时调用useEffect，可以传入第二个参数（在后面添加一个空数组，或者在数组里监听一个状态），当组件加载时只有当监听的状态发生改变时才执行对应的useEffect函数。

useEffect 函数有两个参数，第一个参数是一个回调函数，可以根据第二个参数对useEffect 进行性能优化，有时候不想执行回调函数的时候，就可以添加第二个参数。