記得這兩位朋友的分別代表的作用

• state是讓元件控制自己的狀態
• props是讓外部對元件自己進行配置

*props

props是React父元件與子元件間溝通的橋樑，是靜態(唯獨)的。
props與state主要的差別在於props是不可改變的

父元件App傳入子元件name屬性，value為joyce

import React, { Component } from 'react';
import Table from './Table'

class App extends Component {
  render() {
    return (
      <Table name="joyce"/>
    );
  }
}

export default App;

子元件Table透過this.props取得由父元件傳入的name
就會印出joyce。

import React, { Component } from 'react';

class Table extends Component {
  render() {
    return (
      <div className="Table">{this.props.name}</div>
    );
  }
}

export default Table;

*state

state 主要作用是用元件保存、控制以及修改自己可變的狀態。state在元件內部初始化(給預設值)，state狀態可以透過this.setState方法進行更新，setState會使元件重新渲染。
以下範例透過點擊li就可切換h3所顯示的狀態

class App extends Component {
  constructor(props) { //若要使用這個方法
    super(props) //必須先執行super(props)，若有用到props的話會找不到this.props，沒用到props也可以只寫super()
    this.state = {
        currentPage: 'one', //給預設值
    }
  }

  clickHandler = (e) => {
    this.setState({ currentPage: e})
  }

  render () {
    return (
      <div>
          <h3>{this.state.currentPage}</h3>
          <ul>
              <li onClick={()=>this.clickHandler('one')}>one</li>
              <li onClick={()=>this.clickHandler('two')}>two</li>
          </ul>
      </div>
    )
  }
}
export default App;

• 沒有state的元件叫做無狀態元件(stateless component)
• 設定了state的原元件叫做有狀態元件(stateful component)
  因為狀態會帶來管理上的複雜性，所以React.js非常鼓勵多寫無狀態元件
  以下為範例(一) 沒有使用state的元件，應改為無狀態元件，詳見範例(二)

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi = () => {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi}>Hello World</div>
    )
  }
}
export default HelloWorld;

範例(二)改為無狀態元件(函數式的寫法)

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}
export default HelloWorld;

通常一個元件是透過繼承Component來建構，一個子類就是一個元件。
而用函數的元件寫法:一個函數就是一個元件，可以和之前練習一樣，透過來使用該元件，兩者不同的是函數式元件只能接受props，無法像類元件一樣可以在constructor裡面初始化state。函數式元件(無狀態元件)就是一種只能接受props和提供render方法的類元件。