React Hooks - Day7

[Day 11 - 網速轉換器] 那個...資料可以分享給我嗎 - 將資料傳入組件

上集回顧

Controlled Component

上次主要是要介紹 Controlled Component，在寫 React 的時候，要用 input 這個標籤的時候，我們會用 state 來控制 input 的 value，然後在 onChange 的時候用 setState 來改變 input 的 value。

如果你把 input 的 value 寫死，則 input 的值永遠不會變，除非你把 value 寫成 null 或是 undefined。

今日目標

了解 React 中 Components 之間的資料傳遞。

上次我們做了網速轉換器，當我們在左邊輸入數字，右邊就會即時顯示轉換後的結果，但是下面顯示網速快慢的部分還不會跟著改變。

今天我們要把這部分也完成。

Components 的資料傳遞

因為網速的快慢是根據輸入的網速來決定，所以 <CardFooter /> 需要知道目前的 inputValue 是多少，所以我們要把 inputValue 從 <SpeedConverter /> 傳到 <CardFooter />。

在 React 裡，副 Component 要傳遞資料給子 Component 很簡單，就像是在寫 HTML 的屬性一樣，直接在子 Component 加上你要這個資料叫什麼，要傳什麼資料進去，就好了。

而子 Component 就可以從 function 的 () 裡把資料拿出來，這個資料就會叫做 props。

const Child = (props) => {
  console.log(props)  // {num: 123}
}

const Parent = () => {
  const num = 123
  return <Child num={num} />
}

如果不是自閉標籤，且把值放在標籤中間，則會變成這樣：

const Child = (props) => {
  console.log(props)  // {children: 123}
}

const Parent = () => {
  const num = 123
  return <Child>{num}</Child>
}

如果自己定義 children，而且也有在標籤裡面傳值，則標籤裡的會蓋過自己定義的 children。

const Child = (props) => {
  console.log(props)  // {children: 123}
}

const Parent = () => {
  const num = 123
  return <Child children={456}>{num}</Child>
}

幫之前的計數器加上不一樣的起始值

跟上面的方法一樣，在 <Counter /> 傳入要設定的起始值 props，再從 const Counter = (props) => {} 裡取用 props。

讓每個計數器有不一樣的最大值跟最小值

把最大值跟最小值用 startingValue 來決定。

或是再另外傳入 maxNumber, minNumber 當作 props。

使用 Hooks 要注意的事

React 的 Hooks 在慣例上會用 use 開頭，像是 useState, useEffect, useRef ...等等。

而使用 Hooks 有一個很重要的原則，不能在條件式、迴圈、巢狀函式（nested functions）裡面呼叫 Hooks，以 useState 為例：

const Component = () => {

  if(true) {
    const [state, setState] = useState()
  }

  return (
    ...
  )
}

會直接噴錯誤。

時間夠的話

[Day 12] 快速了解各組件的資料狀態 - React DevTools

React DevTools

Components

1. 可以看到所有的 Components
2. 可以在 Elements 標籤選取到想查看的部分，再移到 Components 標籤，就會顯示該部分是哪個 Components
3. Components 標籤也有選取功能
4. 可以看到 props 跟 state 內容，也可以直接修改
5. 「碼表」按鈕：適合用在有套用 React.Suspense 的 Component，這種 Components 因為需要等到 AJAX 資料回來才會渲染對應畫面，所有會有等待的畫面
6. 「眼睛」按鈕：可以直接切換到 Elements 標籤，讓你看到該 Component 在 DOM 的位置
7. 「蟲蟲」按鈕：會在 console 印出該 Component 的一些資料，方便複製或用 JavaScript 來操作資料
8. 「原始碼」按鈕：可以切換到 Source 標籤，顯示該 Component 在原始碼的位置

Profilter

看不懂，看得懂的教我