擴充Google Chrome React 使用者工具

React 開發者工具支援 Chrome 瀏覽器，可以在擴充套件商店下載（Chrome 擴充套件）。
下載完成後便可以在開發者工具中看到多了兩個名為 "Components" 和 "Profiler" 的頁籤

• Components可以看到該頁面的所有 React 組件。
• Profiler主要是用來檢視效能，可以去看該頁面內各組件渲染所花費的時間和次數。

筆記

Props屬性傳遞參數

• Props主要用來提供值給組件使用，不論是設定屬性或是資料，都可以透過Props來完成。
• React的傳遞參數是利用類似屬性的定義來傳遞
• (index.js)建立標籤 --> (Sub.js)取得標籤進行運算 --> 回傳(indux.js) --> 將(sub.js)做的運算渲染

import React from "react"; //每一個js檔案都需要include
import Header from "./Header"; //引入自己撰寫的sub js檔案

class App extends React.Component
{
    render()
    {
        return(
            <div className = main">
                <Header nickname = "Fandix" /> //建立標籤
            </div>
        )
    }
};

import React from "react"  //每一個js檔案都需要include

class Header extends React.Component
{
    renderLink()
    {
        return(
            <span className = "nickname">
                {this.props.nickname} //這邊的this指向Class Header所以可以使用props取得nickname
            </span>
        )
    }
    
    render()
    {
        return(
            <div className = end>
                //在jsx中使用js物件需要使用{}
                {this.renderLink()} //this指向自身class，所以可以呼叫到自身class中的function
            </div>
        )
    }
};
export default Header; //輸出此物件才能在主js檔案中呼叫

函數組件

可以將結構組件轉換為函式組件

• ES5

function Header(props)
{
    return (
        <div className = end>
            <span className = "nickname">
                {props.nickname} //由於使用函數組件，props為輸入參數，便可以不用this
            </span>
        </div>
    )
}

• ES6

const Header = props =>(
    //ES6箭頭函示可以不用加return，因為預設便會回傳撰寫在括弧內的內容
    <div className = end>
        <span className = "nickname">
            {props.nickname} //由於使用函數組件，props為輸入參數，便可以不用this
        </span>
    </div>
)