全端筆記

留下學習的痕跡

0%

React — 函式元件 (Functional Component)

發表於 分類於 Disqus：

React — 函式元件(Functional Component)

🔖 Render Element

1️⃣ 建立 React 應用程式最小的單位是 Element

1
const element = <h1>Hello, world</h1>;

2️⃣ Render Elememt 到 DOM 內

  • <div id="root"></div> 是一個「root」DOM node，所有在內的 element 都會透過 React DOM 做管理

    1
    2
    3
    4
    5
    const root = ReactDOM.createRoot(
      document.getElementById('root')
    );
    const element = <h1>Hello, world</h1>;
    root.render(element);

💁‍♀️ 使用 React 建立應用程式時，通常會有一個單一的 root DOM node。
如果你想要整合 React 到現有的應用程式時，你可以根據你的需求獨立出多個 root DOM node。

3️⃣ React 只更新必要的 Element

  • React DOM 會將 element 和它的 children 與先前的狀態做比較，並且只更新必要的 DOM 達到理想的狀態
  • React element 是 immutable
    • 一旦建立一個 Element，我們不能改變它的 children 或是 attribute
    • Element 就像是電影中的一個幀：它代表特定時間點的 UI
    • 更新 UI 唯一的方式是建立一個新的 element，並且將它傳入到 root.render

🔖 Functional Component

React的最小單位是 Element，而元件 (component) 都是一個 Function

1️⃣ Function元件的好處

  • 隔離環境、依賴衝突
  • 良好命名、維護容易
  • 接收屬性參數 (props)
  • 分割、抽離元件耦合
  • 重複使用 (reuse)

2️⃣ 實作: 抽離/組合 Component

範例: Create react app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

✏️ 元件抽離

1
2
3
function MyImg () {
  return <img src={logo} className="App-logo" alt="logo" />
}
1
2
3
4
5
6
7
8
9
10
11
12
function AppLink () {
  return (
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  );
}
1
2
3
4
5
6
7
function Description () {
  return (
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
  );
}

✏️ 元件組合

1
2
3
4
5
6
7
8
9
10
11
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyImg />
        <Description />
        <AppLink />
      </header>
    </div>
  );
}

3️⃣ Props

所有的 React component 都必須像 Pure function 一般保護他的 props

  • 定義: props是React父元件與子元件間溝通的橋樑，是靜態(唯獨)的、且不可改變

  • 將元件加入props

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function MyImg () {
      return <img 
        src={logo} 
        className={props.className} 
        alt="logo" 
      />
    }

    function Description () {
      return (
        <p>
          Hello! I'm {props.name}, I'm {props.age} years old.
        </p>
      );
    }

    function AppLink () {
      return (
        <a
          className={props.className}
          href={props.href}
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <MyImg className="App-logo" />
            <Description name="Amy" age="18" />
            <AppLink className="App-link" href="https://reactjs.org" />
          </header>
        </div>
      );
    }

🔎 參考資料