State

在上一篇的最後
有稍微提到組件（components）是可以透過 state 攜帶狀態資料
state 是 constructor 中的一部分
換句話說
他是組件的初始設定之一
得要在組件產生的時候就預設好（initialize）狀態值
當 state 發生改變
React 會通知render更新畫面

今天主要目標為 認識 state 以及學會使用這些狀態資料
一樣先來一段程式碼：

class App extends React.Component {
    constructor(){
        super();
        this.state={
            "name":"RayRay"
        }
    }
   render() {
      return (
         <div>
            <Header/>
            <Content/>
            <p>by {this.state.name}</p>
         </div>
      );
   }
}

這是上一篇的範例程式碼
在constructor中
我設定了一個狀態
這個狀態包含了一個叫做 name 的屬性
這個屬性我給了他 RayRay 的狀態值
而在render的部分我透過大括號用 javascript 去取出這個狀態
this.state.name可以解釋成：

這個組件（this）狀態（state）中特定屬性（在這邊是name）的狀態值

點有點類似物件的
這也就是上次的執行結果可以看到 RayRay 的原因
執行結果：

接下來來個進階版本：
state 可以一次具有多個狀態值
甚至是可以有很多狀態然後很多屬性然後很多物件然後很多屬性和他們的值
這聽起來很像繞口令哈哈
讓我換個方式說明

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "name":"dogA",
               "age":"1"
            },
            {
               "name":"catB",
               "age":"2"
            },
            {
               "name":"pigC",
               "age":"3"
            }
         ],
         id:"Animal List"
      }
   }
   render() {
      return (
         <div>
            <Header title = {this.state.id} />
            <table>
               <tbody>
                  {this.state.data.map((animals, i) => 
                  <TableRow key = {i} data = {animals} />)}
               </tbody>
            </table>
         </div>
      );
   }
}

在這段程式碼裡面
state有一個叫做 data 和一個叫做 id 的狀態
data 這個狀態的值是一個陣列
陣列裡面每一個元素都是一個物件
每個物件裡面包含兩個屬性：name 和 age
而 id 這個狀態則只有一個字串作為他的狀態值

render的部分
App 這個組件渲染一個 Header 組件和一個表格
在渲染 Header 這個組件的時候
將 state 像是參數一樣命名成 title 然後傳遞給 Header 這個組件
在 Header 裡面透過this.props.title去取得狀態並且渲染出h1標籤
這是 state 資料從一個組件傳遞到另一個組件的用法

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}

另外表格的部分
表格的<table>和<tbody>在 App 組件裡面渲染
內容則是讓 TableRow 這個組件去生成
在App裡面有用到一個map函式
這個函式會產生並回傳一個由參數執行結果組成的陣列
是javascript中的陣列（Array）可用函式
所以在這裡他會產生一個由放入資料的 TableRow 組件組成的陣列
透過大括號再將每一個元素列出
實現渲染出整個表格的結果
TableRow 這個組件裡面
render函式透過this.props.data.name和this.props.data.age
跟前面的 Header 一樣是 state 資料在其他組件中取用的方法
關於這個部分我會在下一篇中更詳細的說明~

參考資料

1. tutorialspoint-ReactJS Tutorial
2. React Native
3. 像這樣構建前端架構，除了 React 沒有其他可説了
4. React - Lists and Keys
5. MDN web docs - map

>>> 隊友任意門 <<<

• Eva Vue.js 30天隨身包
• Ben那些年，我們一起錯過的Javascript
• Ray激戰ReactJS 30天

Day7 end
by 瑞Ray σ`∀´）σ