一 useState狀態管理：https://www.jianshu.com/p/700777ea9db0

1. useState(initialState)的第一個引數是初始狀態。返回的陣列有兩項:當前狀態和狀態更新函式。
2. useState一般用於簡單的狀態管理；複雜的可以使用useReducer；
3. 自定義Hooks: 適用場景：在兩個函式之間共享邏輯時，我們會把它提取到第三個函式中。而元件和 Hook 都是函式，所以也同樣適用這種方式。https://zh-hans.reactjs.org/docs/hooks-custom.html

 1 import React, { useState, useEffect, memo, useMemo, createContext, useRef, useContext } from 'react'
 2
 
 
 3 // 自定義Hooks需要以use開頭
 4 const useToggle = (initial) => {
 5   const [on, setOn] = useState(initial);
 6   const handleOn = (value) => {
 7     console.log(value);
 8     setOn(value)
 9   }
10   return [on, handleOn]
11 }
12 
13 function App () {
14   const [on, setOn] = useToggle(false);
15   const lightSwitch = () => setOn(!on);
 
16   return (
17     <>
18       <div className="bulbs">{on?'開':'關'}</div>
19       <button onClick={lightSwitch}>開/關</button>
20     </>
21   );
22 }
23 
24 export default App

類和鉤子函式的理解：https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html