Reactivity
回應式
「當值改變時，做些什麼」
網頁應用的狀態主要會儲存在資料庫之類的外部元件，因此原則上是無狀態的
但前端開發中，狀態則是儲存在DOM或React、Vue的元件上，因此是有狀態的
其中會有許多從某個狀態計算為另一個狀態的操作，容易變為bug的原因
例如檢查表格內文、日期、勾選是否都有輸入
需要針對每個狀態個別新增、修改
回應式改為宣告「狀態的依賴關係和計算方法」，藉此自動化相關操作
集合在單一函式中進行處理
此函式（處理邏輯）為純粹函式
同樣參數必定回傳同樣結果
不會發生副作用
回應式做為協調複數狀態的安全帶
React不使用RxJS的事件流，而是使用普通的JavaScript函式為回應式
呼叫Hooks以外的元件函式，宣告為純粹函式
除了外部傳入的狀態（props）之外，Hooks參照的狀態（例如useState()）改變時，也會重新執行元件函式
因此在useEffect()中使用setState()是反面模式 Vue
Ref的功能等同事件流
code:javascript
const pubSub = {
events: {},
subscribe(event, callback) {
this.eventsevent.push(callback); },
publish(event, data) {
if (this.eventsevent) this.eventsevent.forEach(callback => callback(data)); }
};
pubSub.subscribe('update', data => console.log(data));
pubSub.publish('update', 'Hello world!');
Observer
觀察者模式
code:javascript
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index > -1) {
this.observers.splice(index, 1);
}
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
console.log(data);
}
}
const subject = new Subject();
const observer = new Observer();
subject.addObserver(observer);
subject.notify('Hello world!');
Object.defineProperty
生態系
Web Animations API