# 1.22 React
###### tags: `React`
## 零、目錄&待辦事項
[TOC]

## 壹、元件的狀態

[講義在這裡-1](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0122/react-state-props.pdf)

[講義在這裡-2](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0122/react%E6%8A%95%E5%BD%B1%E7%89%87-%E7%8B%80%E6%85%8B-%E5%B1%AC%E6%80%A7-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.pdf)

### 目前有了Hooks，也可以在函式型元件中使用state


## 貳、實例-什麼是屬性(props) HelloWorld.js
* 建立父母子女關係，父母是App，子女是HelloWorld
* 建立關係後就可以用單向資料流傳遞資料，從App給HelloWorld

// components/HelloWorld.js

function HelloWorld(props){
    return (
        <h1>
            {props.name}, {props.text}
        </h1>
    )
}
export default HelloWorld

// App.js
import HelloWorld from './components/HelloWorld'

function App(){
    return(
        <>
            <HelloWorld text="你好" name="Amy"/>
            <HelloWorldClass text="你好" name="Amy"/>
        </>
    )
}

export default App

// components/HelloWorld.js 以解構賦值改寫
function HelloWorld(props){
    // 解構賦值
    const {text, name} = props
    
    return(
    <>
        <h1>{name}, {text}</h1>
    </>
    )
}

// components/HelloWorldClass.js
import React from 'react'

// 類別型元件除了建構式外，其他都是自動得到，props會自動傳進來
class HelloWorldClass extends React.Component{
    constructor(){
        super()
        this.state={}
    }
    
    render(){
        return (
        <>
            <h1>{this.props.name, this.props.text}</h1>
        </>
        )
    }
}

export default HelloWorldClass

// 解構賦值改寫

class HelloWorldClass extends React.Component{
    constructor(props){
        super(props)
        this.state={}
        console.log(props)
    }
    
    render(){
        const {name, text} = this.props
        return (
        <>
            <h1>{name, text}</h1>
        </>
        )
    }
}

export default HelloWorldClass

## 參、屬性二大重點
### 1. 屬性的資料類型
### 2. 屬性的預設值
* 要注意是預設參數，還是預設屬性
* function HelloWorld(name="bob", text="hello")是預設參數

在導出元件前，要寫defaultProps，不管函式型或是類別型都一樣用這個較方便~

// 以HelloWorld.js (函式型元件)示範

function HelloWorld(){
    const [name, text] = props
    
    return(
        <>
            <h1>{text}, {name}</h1>
        </>        
    )
}

HelloWorld.defaultProps = {
    name:'Bob',
    text:'Hello'
}

export default HelloWorld

## 肆、撰寫元件的二種方式
歷史上有三種，最原本的是creatClass，現在已經沒人用了，看到這種的例子跳過

* 類別型元件：
* creatClass的繼承人
* 函式型元件：
* 有鉤子(hook)後，函式型元件也可以使用狀態了
* use開頭的東西就是鉤子，只能在函式型元件使用，類別本來就有狀態了
* <>、</>是<React.Fragment>、...的縮寫
## 伍、限制屬性的類型
* HTML的屬性只能給字串值，react則沒有限制(數值、字串、函式等等都可以)
* 用PropTypes檢查props的類型，yarn add prop-types安裝套件
* 直接看老師的程式碼跟npmjs的說明、這個等熟練後再來學
* proptypes只能大概檢查、限制基本的資料類型，沒有辦法限制函式跟物件的長相，像是物件的必要屬性、函式的必要傳入參數等等都辦不到
* 現今主流工具是typescript，直接限制資料類型

## 陸、JSX語法
[講義在這裡](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0122/JSX%E8%AA%9E%E6%B3%95.pdf)

### 一、React元素
React元素是用來描述dom屬性的物件，有四個屬型
1. type：HTML的元素類型(就是標籤啦)
2. props：元素的屬性
3. key：react用來識別元素，通常用來識別列表(ul、li)、表格(table)、多個一模一樣的h3等東西，做最佳化使用，看到map就要給key。map之所在key之所在。
5. ref：是個緊急逃生出口，用來存取對應的實體(相當於getElementById)，整合其他函式庫用(例如jQuery)。

### 二、fragment <> </>

因為最終我們是要渲染到root上，只能有一個div。
一開始是用div把所有語法包在裡面，後來用fragment<></>取代掉div。
有助於CSS撰寫。

### 三、JSX的花括號使用的情況
* FISH: 花括號裡面放除了HTML標籤外的東西就是了
* 在{}中相當於要寫JS表達式
* JSX語法的花括號{ }使用的情況將會有兩個地方
1. 一個是在標記中的props(屬性)指定值時使用。但如果是字串時會直接用"字串"。如果是用來對CSS的Style屬性，{}中要放的是物件:值。
2. 在標記與標記之間，也就是有可能是在像\<div>...\</div>這樣的標記之中。

<ul>
{
  this.state.items.map((value, index) => {
    return 
        <TodoItem 
            key={index} 
            text={value} 
            index={index} 
            onItemClick={this.handleRemoveItem}/>
  })
}
</ul>

### 四、實例-5.HelloWorldList.js
* JSX中列表map的用法

### 五、JSX語法花括號中的表達式

* 到底可以放什麼?
1. 運算出來的值、物件值、CSS的樣式(這要寫在html標籤內style={{...}}，寫成物件的樣子)
3. 變數值
4. 陣列
5. 函式
6. 三元運算
7. 註解
8. 展開運算福

* 不能放什麼?
1. 直接放物件

### 六、實例-6.JSX中的children用法

## 柒、

## 捌、

## 玖、

## 拾、