關於 React 小書：state vs props

state vs props

state

1. state 用於 Component 保存、控制、修改自己可變狀態。
2. state 在 Component 內部初始化，外部不能訪問或修改。
3. state 可透過 setState 函式更新，導致 Component 重新渲染。
   
   

props

1. props 主要作用讓該 Component 的父 Component 可傳入參數來配置該 Component。
2. 是從外部傳入的參數，Component 內部無法控制也無法修改。
3. 除非外部主動傳入新的 props，否則 Component 的 props 保持不變。

小結

1. state 與 props 都可決定 Component 的行為和顯示形態。
2. 一個 Component 的 state 中的數據可通過 props 傳給子 Component。一個 Component 可以使用外部的傳入的 props 初始化自己的 state。
3. state 是讓 Component 控制自己的狀態，props 是讓外部對 Component 自己進行配置。
4. 盡量少用 state，多用 props。

React 鼓勵無 state Component

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'


const HelloWord = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}

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

結果

參考資源

• state vs props