setter和getter讓我們能在存取物件的參數時額外做一些事情，下面將展示一個範例來體現其簡單實用。
設定參數時順便刷新頁面
下面簡單的類別，讓外部修改lightSwitch參數就能刷新React組件，原因是在setter中搭配了React ViewRerender架構方法來刷新頁面。
class SwitchController {
constructor() {
this._lightSwitch = false;
}
get lightSwitch() {
return this._lightSwitch;
}
set lightSwitch(boolean) {
if (this._lightSwitch == boolean) return;
this._lightSwitch = boolean;
ViewRerender.all.forceRerender(); //刷新頁面
}
}
讓開關影響開關
下面加入的總開關，不同之處僅在第17行，關閉時會順帶關閉lightSwitch。
第34行利用getter，讓外部更方便存取燈的狀態。
class SwitchController {
constructor() {
this._mainGate = false;
this._lightSwitch = false;
}
get mainGate() {
return this._mainGate;
}
//總開關，關閉後還會關閉lightSwitch子開關
set mainGate(boolean) {
if (this._mainGate == boolean) return;
this._mainGate = boolean;
//關閉時會順帶關閉lightSwitch
if (boolean == false) this.lightSwitch = false;
ViewRerender.all.forceRerender();
}
get lightSwitch() {
return this._lightSwitch;
}
set lightSwitch(boolean) {
if (this._lightSwitch == boolean) return;
this._lightSwitch = boolean;
ViewRerender.all.forceRerender();
}
//讓外部能只讀取isLight參數，就知道燈是否亮起
get isLight() {
return this.mainGate && this.lightSwitch;
}
}
所見及所得，把參數改成什麼，狀態就會變成什麼。
上面的SwitchController完成後，下面的渲染組件只需存取參數，就能完成狀態的改變與頁面的刷新。
import React, { useEffect, useReducer } from "react";
import SwitchController from "../utils/SwitchController";
const Main = () => {
const { mainGate, lightSwitch, isLight } = SwitchController;
return (
<div>
<Switch
checked={mainGate}//讀取mainGate
onChange={() => SwitchController.mainGate = !mainGate}//設定mainGate
/>
<Switch
checked={lightSwitch}//讀取lightSwitch
onChange={() => SwitchController.lightSwitch = !lightSwitch}//設定lightSwitch
/>
{isLight ? "light on" : "light off"}//讀取isLight
</div>
);
};
完整範例：功能開關setter和getter
結論
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果。如果有功能有多個狀態，並且互相影響，實作時就可以考慮該做法。
如果大家有其他好的用法，歡迎在下方留言。
