• 簡述React生命週期

  • mount是component首次被渲染到DOM的階段，在functional component中，我們通常會在component渲染完成後（也就是return語句執行完畢後）使用useEffect來執行後續操作，例如呼叫API獲取資料，然後把得到的資料放進state裡，等待update
  • update (re-rendering) 則是component在state或props改變後更新DOM的階段，在更新的時候React只會去做最小程度的渲染
  • unmount是指一個component從DOM中被移除的階段，相對應的setTimeout或event listener也應該被移除

• state和props分別是什麼?有何差別?

  • state是在component內使用的資料，可以被改變，
  • props是父元件提供給子元件使用的資料，是唯獨的，不可以被改變，若需要改變他，要從在定義這個prop的元件裡，把這個prop以state或callback function傳遞下去。這樣做的好處是可以確保props資料的一致性

• state和props的使用時機分別為何?

  • 如果一個資料會經常改變，或者它的值取決於用戶的互動，那就要使用state來管理這個數據。如果一個數據不怎麼需要改變，那麼可以使用props來傳遞這個資料

• React Router 怎麼用

  • 先下載package (npm i react-router-dom)

  • React router 元件可以被分成三種

    • Routers 例如 <BrowserRouter> 和 <HashRouter>
    • Route matchers 例如<Routes> 和 <Route> components
    • Navigation 例如 <Link> and <NavLink> components
    1. Routers
       • 若不需要後端，可用hash router，react會parse # 在用戶端
       • 在有後端的時候，而且通常在打造SPA上的時候，可用BrowserRouter。在index.js把<React.StrictMode> 取代成BrowserRouter，包住App
    2. Route matchers
       • Routes：是用來取代Switch元件，包在Route外層，檢查是否有對應的Route。在App.js裡，包住客製元件。
       • Route：有兩個prop，分別是path和element

         <Route path="/" element={<Home/>}></Route>
         

         <Route path="contact" element={<Contact/>}></Route>
         

    3. Nagivation

       • Link：類似HTML中的元素，用來navigate至其他頁面，包含一個to prop，裡頭寫的是你在Route定義的url，例如我們在一個購物網站，要到結帳頁面可以這樣寫

         <div className="checkout-wrap">
           <Link to="checkout">checkout</Link>
         </div>
         

       • NavLink： 是一種特殊類型的 ，預設情況下，在它處於活動狀態時會添加active類別。我們通常在建立導覽列(navigation menu)，需要寫一連串連結時使用它。

Hooks

• Hook的特性

  • 只能在React函式的最頂層使用Hook，也不能在迴圈(如for)、if...else 或巢狀結構(如map)中使用
  • 普遍用在functional component中，在class component中不管用

• useState的用處為何?

  • 用處為宣告state和state setter function ，setter 是用來更新State的值並且觸發re-render

• 怎麼使用useEffect？

  • 用處為執行副作用(side effect)
  • 語法為 useEffect(()=>{}
    ,[dependency array])
    我自己會把它想成useEffect(副作用,[觸發條件])

• 如何用 useState 來對一個 array 增減內容？

  • 正確範例

    • 新增

      const [arr, setArr] = useState(["item1"]);
      useEffect(() => {
        setArr([...arr, "item2"]);
      }, []);
      useEffect(() => {
            console.log(arr); // ['item1', 'item2']
      }, [arr]);
      

    • 刪除

        const [myArray, setMyArray] = useState(["a", "b", "c"]);
        const removeItem = (index) => {
          setMyArray((prevArr) => prevArr.filter((item, i) => i !== index));
        };
        useEffect(() => {
          removeItem(0);
        }, []);
      
        useEffect(() => {
          console.log(myArray); //["b","c"]
        }, [myArray]);
      
      

  • 避免直接修改state的內容

      let [arr, setArr] = useState(["item1"]);
      arr = ["item2"]
    

    雖然說從技術角度來說這樣做是有效的，當你直接重新賦值 arr 時，React 將不會察覺到這個改變，元件也不會基於這個變化重新渲染，所以記得要用state setter去處理。

  • 避免無限渲染(範例1)

     let [arr, setArr] = useState(["item1"]);
     setArr([...arr, "item2"]);
    

    setArr 函式在被調用時會觸發元件的重新渲染，進入了函式調用、元件重新渲染的輪迴。所以應該要設定在條件觸發後再用state setter

  • 避免無限渲染(範例2)
    這個例子裡，我們設定useEffect副作用為更新arr的內容，又將arr放進deps array，所以進入不斷更新arr、運行useEffect的輪迴

      const [arr, setArr] = useState(["item1"]);
      useEffect(() => {
        setArr([...arr, "item2"]);
      }, [arr]);
    

以上若有任何錯誤或建議，都歡迎留言給我，謝謝😄