本章內容

• prop的傳遞重點
  • 宣告預設的props
  • 如何使用prop
• this.state
  • 從另外一個函示中叫出this.setState
  • 使用 this.setState 怎麼一直自動更新？

前言：

這部分是我覺得最難理解的區塊，透過父傳子的概念可以將手上的資料活用到什麼程度？也可以將目前所擁有的state做什麼改變？

prop的傳遞重點

1. 通過Component傳遞prop，同時可以將屬性(attribute)同時傳遞至子層
2. 在子層可以透過，this.props.prop-Name取得從父層傳遞來的值
3. 使用prop決定要展示的內容
4. 將事件處理方式作為prop傳遞
5. 接受prop事件處理並將其附在其他監聽事件上
6. 根據已經命名事件處理和事件處理程序屬性相對應即可執行
7. this.props.children 即是props內的內容
8. getDefaultProps（）

宣告一個預設的props

在使用function與ES6的語法時，getDefaultProps（）會被定義到Component上的一個屬性

class Amazing extends React.Component {
  // ...
}

Amazing.defaultProps = {
  name: 'Mary'
};
//定義到name上

this.state

定義：Dynamic information 可以改變的資料
有兩種方式可以拿到component中變動的資料：prop、state

prop vs. state 不同處
prop 在component 外部定義
state 在component內部定義

?寫法：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mood: 'decent' };
  }
 
  render() {
    return <div></div>;
  }
}
 
<Example />

解釋：

第四行 this.state 需要等於一個物件
constructor、super是ES6的寫法，不單單只是寫在React中

說明

在React component 中constructors在建立時，會使用『super』，不然會出錯！

從另外一個函示中叫出this.setState

import React from 'react';
import ReactDOM from 'react-dom';

const green = '#39D1B4';
const yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props){
    super(props);
    this.state = { color: green };
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    const newColor = this.state.color == green ? yellow : green;
    this.setState({ color: newColor });
  }
  
  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
        <button onClick={this.changeColor}>
  			    Change color
				</button>
      </div>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById('app'));

解釋：

1. 透過25行的 button 觸發click事件
2. 監聽21行中的 背景色切換
3. 監聽的定義在14-16行內
4. 整個事件主調用在第16行
   this.setState({ color: newColor });
5. 在12行中，定義切換的顏色

使用 this.setState 怎麼一直自動更新？

每當調用 this.setState() 時，一旦狀態發生變化，this.setState() 就會自動調用 .render()。

所以，setState（），==不可以==呼叫render()中的函數，否則會造成infinite loop ➰

class BadComponent extends React.Component {
  constructor(props) {
    super(props);
    this.count = 0;
  }
  render() {
    // Don't do this! This is bad!
    this.setState({ count: this.state.count + 1 });
    return <div>The count is {this.state.count}</div>;
  }
}

<仍有資料尚未整理完整，盡快補齊～>