# Strategy & State Pattern --- ## 為什麼要用設計模式？ --- ## 先備知識 - [TypeScript in React](https://react-typescript-cheatsheet.netlify.app/) - [Conditional Rendering](https://zh-hant.reactjs.org/docs/conditional-rendering.html) - [Render Props](https://zh-hant.reactjs.org/docs/render-props.html) --- # Strategy Pattern 定义一系列算法，并将每种算法分别放入独立的类中，以使算法的对象能够相互替换。 --- # Strategy Pattern 定義可以隨時切換的策略 來達成特定目的 --- ## 動機 我希望讓一個元件的特定部分可以客製化 來達到重複使用的目的。 --- # Strategy Pattern 定義可以隨時切換的 ~~策略~~ 渲染邏輯 來 ~~達成特定目的~~ 觸發 Modal --- ## Startegy Pattern 的特性 - 可以自由選擇使用的算法，如果你的算法極少發生改變，使用該模式只會讓程式過於複雜。 - 可以將算法的實現和使用算法的代碼隔離開來，開發者可以自由選擇合適的策略。 - 可以用組合來代替繼承。現代編程語言允許你在匿名函數中實現不同版本的算法。 - 符合開閉原則。無需對 Component 進行修改就能夠插入新的 Component。 --- ## 應用 [passportjs](http://www.passportjs.org/) --- # State Pattern --- # State Pattern 让你能在一个对象的内部状态变化时改变其行为，使其看上去就像改变了自身所属的类一样。 --- # State Pattern 透過改變內部狀態 來改變行為 --- ## 動機 我希望讓一個組合元件能呈現完整的流程 --- # State Pattern 透過改變 *元件內部* 的狀態 來改變 *元件內部* 的 *渲染* 行為 --- ## State Pattern 的特性 - 如果状态很少或很少发生改变，那么应用该模式可能会显得小题大作。 - 状态之間存在依賴，能触发从一个状态到另一个状态的转换。 - 通过消除臃肿的状态条件语句简化 Context 代码。 - 单一职责原则。将与特定状态相关的代码放在的 Function 中。 - 符合开闭原则。无需修改已有 State 和 Context 就能引入新状态。 ---