功能能開關setter和getter

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能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果。如果有功能有多個狀態，並且互相影響，實作時就可以考慮該做法。

如果大家有其他好的用法，歡迎在下方留言。