09-05-2021

React Component 是基於元件化的思考模式

本章內容

• Component特性
• Component注意事項
• Function Component & Class Componet 是什麼樣的存在？
  • Function Component
    • 將共用組件放在子組件內顯示
    • 將一個Component使用Render出來
  • Class Component
• 拆解Component，讓大家一起分工合作吧！
  • 組合 Component
  • 抽離 Component
• Props 特性
• 使用Props 傳遞
  • 使用props時的判斷情境

Component 特性

1. 基於元件化的思考模式
2. 宣告Component的方式，使用JSX的方式，可以容易知道這個component在做什麼
3. 不如以往jQuery 進行DOM的更改，在效能上是個大傷。而React中有自己的Virtual DOM ，在App與DOＭ溝通時會更有效率的進行更新。
4. Component PropType防呆機制，若沒有傳入值會返回props預設值（Default Prop Values）
5. Component也是有生命的，有狀態的。透過state(使用useState修改)以及props(從父元素中傳入資料)，再者透過生命週期控制component對於元件的處理。

（image via maketea）

Component注意事項

• Component 的字首需要是==大寫字母==
• 小寫字母會被React 視為原始的DOM標籤。
• <div> 視為HTML的<div>標籤
• <Doggy / > 則視為一個component，且需要在作用域中使用到<Doggy / >

說明：

component就像是一個個拆解開來的function，他可以接受任意的參數(props)傳遞，並且將回傳React element所寫的畫面。同時component 可以將UI 拆解成獨立且可以重複利用的程式碼，我們即可以將每個component 獨立看待。

Function Component & Class Componet 是什麼樣的存在？

Function Component:

本身就是JavaScript 的funtion，stateless component（沒有狀態的component）沒有內部狀態、沒有實作物件、沒有ref、沒有生命週期函數。
若非需要控制生命週期的話，建議使用stateless component，可以獲得較好的效能

說明：

我們簡單的定義一個React component，因為在這裡面他只接受一個props(屬性)物件，並且回傳一個React element。

範例：
function Doggy(props) {
  return <h1>我是可愛的, {props.name}</h1>;
}

將一個Component使用Render出來

重新整理一下思緒，我們昨天在element 的章節裡提到的～

const element = <p>這是第一個顯示的文字</p>;

同時React element 也是可以自己定義成component

const element = <Doggy name="狗狗" />;

但是，<Doggy name="Sara" /> 該怎麼顯示呢？關於更深入的傳遞方式，在製作一集專門介紹的篇章記錄一下。

說明：

當React 看到我們自定義component的element時，就會將JSX屬性以及childern(內容)
當作single object 傳遞給該一個component，而這其中的object 就是props

function Doggy(props) {
  return <h1>我是可愛的, {props.name}</h1>;
}

const element = <Doggy name="狗狗" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

解釋：

我們在const element = <Doggy name="狗狗" /> 使用了ReactDOM render() 呼叫他
並在<Doggy name="狗狗" /> 以 {name: '狗狗'} 當作 props傳入Doggy的component 並且return呼叫他。

當 Doggy component 回傳了 <h1>我是可愛的, {props.name}</h1> 返回這個element

再來 ReactDOM 就會將DOM更新成我是可愛的,狗狗

將表單內容迴圈渲染出來的情境

const people = ['Rowe', 'Prevost', 'Gare'];
const peopleLis = people.map(person)=>
  // expression goes here:
  <li>{person}</li>
);
// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>,document.getElementById('app'))

解釋：

使用.map 迴圈
設定要顯示的person變數內容
用peopleLis 作為component
最後DOM出來在ul裡面peopleLis迴圈出來的li內容

• 同上篇，在map中加入key值，迴圈出來加入index順序。

const peopleLis = people.map((person,i) =>
  // expression goes here:
  <li key={'person_' + i} >{person}</li>
);

Class Component:

ES6的定義方式

可以進行複雜的操作和元件生命週期的控制，但是相對於 stateless components 耗費資源

class Doggy extends React.Component {
  render() {
    return <h1>我是可愛的, {this.props.name}</h1>;
  }
}

將共用組件放在子組件內顯示

• 若組建沒有地址可以填，加上.js也是可以被讀取到的

import React from 'react';
import ReactDOM from 'react-dom';
import {NavBar} from './NavBar.js';
／／用花括號表示引入的component名稱 

class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="https://content.codecademy.com/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  }
}

在component前面加上export 就可以將NavBar引入進來

//範例

import React from 'react';
export class NavBar extends React.Component {
  render() {
    const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });
    return <nav>{navLinks}</nav>;
  }
}

<上篇>