React Hooks使用 Effect Hooks

import React, { Component, useState, useEffect } from "react";

// hooks組件
function App() {
  const [count, setCount] = useState(0) // useState 默認值 0 返回一個數組，第一個是變量，第二個修改變量的方法
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  })
  const onReasize = () => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    });
  }
  // useEffect第一種方式，只有一個函數，沒有數組，組件每渲染一次時useEffect執行一次
  useEffect(() => {
    document.title = count;
  });
  // useEffect第二種方式，有第二個參數數組，數組，數組爲空，useEffect只執行一次
  useEffect(() =>{
    window.addEventListener('resize', onReasize, false);
    return () => { // 相當於 Componentunmount
      window.removeEventListener('resize', onReasize, false);
    }
  },[])
  // useEffect第三種方式，有第二個參數數組，並且數組有參數，當參數變化時，就執行useEffect一次
  useEffect(() => {
    console.log('====================================');
    console.log(count);
    console.log('====================================');
  },[count])
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        點擊{count} 當前的像素寬{size.width} 當前的像素高 {size.height}
      </button>
    </div>
  );
}