扩充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档案都需要includeimport Header from "./Header"; //引入自己撰写的sub js档案class App extends React.Component{    render()    {        return(            <div className = main">                <Header nickname = "Fandix" /> //建立标籤            </div>        )    }};

import React from "react"  //每一个js档案都需要includeclass 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>)