【React系列】react hooks全面解讀

爲何是hook？

• 相比於class component代碼簡介，
• 是否

名稱	Function Component	Class Component
性能	90分	88分
this	無	有
函數編程	是	否
複用	簡單	嵌套層級深
生命週期	優雅	複雜
hooks	有	無
錯誤處理	無	有
代碼順序	有嚴格順序	無
閉包	會有閉包問題	無

useState

function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setTimeout(() => {
      console.log(count,'setTimeout')
      // 在3000秒內不管點擊多少次，count都是當前的狀態計算（根據點擊次數會執行屢次），因此並不會根據點擊次數累加
      setCount(count + 1)
    }, 1000);
  }
  function handleClickFn() {
    setTimeout(() => {
      // 點擊的次數多少函數就執行幾回，  
      // 好比 3000秒點擊三次: 至關於定時器生成三個，結果累計相加=3  prevCount上次狀態 
      setCount((prevCount) => {
        return prevCount + 1
      })
    }, 3000);
  }
  return (
    <>
      Count: {count}
      <button onClick={handleClick}>handleClick+</button>
      <button onClick={handleClickFn}>handleClickFn+</button>
    </>
  );
}
複製代碼