React 組件生命周期與狀態管理筆記：Props、State、事件、Mixin 與表格組件實戰

Props 與 PropTypes

this.props 為只讀配置屬性，父組件傳遞給子組件。定義 propTypes 可運行時驗證類型，提升可維護性。

State 狀態管理

• this.state 存儲組件內部可變數據。
• 必須用 this.setState() 更新，觸發 render() 重繪。直接修改 this.state 不會更新 UI。
• setState 合併更新，replaceState 完全替換。

事件處理

React 合成事件系統：統一跨瀏覽器 API，使用駝峰命名（onClick）。事件委託機制自動綁定到文檔根節點，性能優。可用 e.nativeEvent 獲取原生事件。

Props vs State 選擇原則

Props 用於配置傳遞，State 用於內部數據維護。外部不應調用子組件 setState，需用 componentWillReceiveProps 或 componentDidUpdate 中 replaceState 響應 Props 變化。

生命周期方法

掛載：constructor → render → componentDidMount。更新：componentWillReceiveProps → shouldComponentUpdate → render → componentDidUpdate。卸載：componentWillUnmount。

Mixin 代碼復用

Mixin 為包含生命周期方法的對象，混入組件自動擁有這些方法。例如日誌 Mixin 記錄所有生命周期調用。

表格組件實戰要點

• 渲染列表時 key 必須在同層唯一。
• 排序等操作先拷貝 state 數據，再修改拷貝，最後 setState。
• 導出 CSV/JSON 利用 Blob API：new Blob([content], {type: 'text/csv'}) 配合 URL.createObjectURL 下載。