09-06-2021

本章內容

• 拆解Component，讓大家一起分工合作吧！
  • 組合 Component
  • 抽離 Component
• Props 特性
• 使用Props 傳遞
  • 使用props時的判斷情境

拆解Component，讓大家一起分工合作吧！

組合 Component

說明：

Component可以在輸出時引用其他的component，像是表單、按鈕、對話匡、整個畫面，我們都能用component的方式呈現。

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

function App() {
  return (
    <div>
      <Doggy name="狗狗" />
      <Doggy name="貓貓" />
      <Doggy name="兔兔" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

解釋：

所以在App()這個畫面中，我們可以同時看到三個<h1>分別是：

我是可愛的，狗狗
我是可愛的，貓貓
我是可愛的，兔兔

抽離Component

一個Component中我們可以繼續抽離分成更小的component，更方便於管理與維護。

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

解釋：

 <div className="UserInfo">
    <img className="Avatar"
        src={props.author.avatarUrl}
        alt={props.author.name}
    />
 // 這裡的img內的屬性，使用了author的名稱傳入資訊  
 // props(傳遞方式).author(props名稱).avatarUrl(定義好的內容) 

你知道上面的內容共拆分成幾個props傳入嗎？

答案是：三個，props.author、props.text、props.date

Props 特性

無論是 function 、 class function 來宣告component，都==絕對不能==修改自己的props。
所有的React component 使用都必須讓props維持 最初的傳遞時的樣子。

使用props 傳遞

解釋：

<PropsDisplayer myProp="Hello" /> 帶著myProp="Hello"，屬性為myProp的字串Hello。
在<PropsDisplayer>的component 裡面，先取了一個變數stringProps將傳遞進來的props使用JSON.stringify()解構成我們要的字串，並以{stringProps}變數被render顯示。

範例：
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
  render() {
    const stringProps = JSON.stringify(this.props);
    return (
      <div>
        <h1>CHECK OUT MY PROPS OBJECT</h1>
        <h2>{stringProps}</h2>
      </div>
    );
  }
}
ReactDOM.render(<PropsDisplayer myProp="Hello" />,document.getElementById('app'))

再來一個範例：
在render 時 直接置換掉 {this.props.firstName}! 內的firsrname!

import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;
  }
}
ReactDOM.render(
  <Greeting firstName='Groerta' />, 
  document.getElementById('app')
);

使用props時的判斷情境

在 props 中設定if判斷式，判斷傳遞進來的props.signedIn如果是false就顯示GO AWAY
否則顯示Hi there, {this.props.name}!

// Greeting.js
import React from 'react';
import ReactDOM from 'react-dom';
export class Greeting extends React.Component {
  render() {
    if (this.props.signedIn === false) {
      return <h1>GO AWAY</h1>;
    } else {
      return <h1>Hi there, {this.props.name}!</h1>;
    }
  }
}

在要顯示的app.js 中，為Greeting 多增加一個參數並且打開變成true，即是要顯示的意思

//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Greeting } from './Greeting';
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="Alison" signedIn={true} />
        <article>
          Latest:  where is my phone?
        </article>
      </div>
    );
  }
}
ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

對啊，改天來為傳遞方式做一篇詳細說明。

總結：

1. Stateless Functional Components 目前最新版本的React，function components 可以執行 class components 可以做的事情

// 一般寫法:
export class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}


// 使用stateless functional component:
export const MyComponentClass = () => {
  return <h1>Hello world</h1>;
}

2. 基於元件化的思考模式
3. React中有自己的Virtual DOM ，在App與DOＭ溝通時會更有效率的進行更新
4. Component PropType防呆機制
5. Component也是有生命的，有狀態的。

<下篇>