# props, state
###### tags: `React`

:::info
當我們想要傳資料給 component 的時候，傳進去的資料叫做 `props` ，而在 component 裡面使用的變數叫做 `state`。兩者都是 JavaScript object。
:::

## props (properties)
> - 用於在 React 組件之間傳遞數據。（類似於 function 的參數）
> - props 的傳遞是單向的（僅從父元件 → 子元件）(default props 例外）。

// App.js （父元件傳入 props）
function App() {
  return (
    <div>
      <Player name="Ashlyn Harris" team="Orlando Pride" />
      <Player name="Megan Rapinoe" team="Reign FC" />
      <Player name="Julie Ertz" team="Chicago Red Stars" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

// Player.js （子元件接收 props）
const Palyer = ({name})=>{
    return <p>{props.name} plays for the {props.team}</p>
}

#### props 預設值
> 設置 props 的預設值可以有以下幾種方法：
- **`.defaultProps`**

// Parent.js
import Child from "./Child"

const Parent = ()=>{
    const x = 100
    return <Child /> // 父元件沒有傳遞 props
}

// Child.js
const Child = ({number})=>{
    console.log(number)  // 0
    return <h1>hi</h1>
}

Child.defaultProps={  // Child 組件的 props 預設值
    number: 0
}

- **|| (短路求值)**

// Parent.js
import Child from "./Child"

const Parent = ()=>{
    return <Child number={ x || 0 }/> //使用短路求值判斷 props 數值 
}

// Child.js
const Child = ({number})=>{
    console.log(number)  // 0
    return <h1>hi</h1>
}

- **ES6 Default parameters**

// Parent.js
import Child from "./Child"

const Parent = ()=>{
    return <Child />
}

// Child.js
const Child = ({number=0})=>{  // here
    console.log(number)  // 0
    return <h1>hi</h1>
}

## state
> - state 允許組件創建和管理自己的數據。（類似於在 function 中宣告的變數）
> - state 的改變需透過 `setState` 。
> - 當 state 改變時，組件會重新 render（[生命週期](https://hackmd.io/uGK73iAtRBegvTOynPMwLg)）。

:::info
**Stateless Component 無狀態元件：** 沒有state的元件
**Stateful Component 有狀態元件：** 設定了state的原元件
:::

### setState 非同步議題
[官方文件](https://reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous)
> 在重新渲染前，React 會等待所有的組件的事件處理器都呼叫 setState 方法，藉以減少效能的浪費。
> 不過 React 承諾在未來的版本中，可能會在重新 render 前批量更新 state。（目前版本 17.0.2）
:::success
:::