現在常說的 宣告式，狀態 到底是個啥？一篇文章淺聊清楚

木木劍光發表於2023-01-17

什麼是宣告式

  • 理解宣告式之前，先說下 宣告 的含義，平時我們說 宣告一個變數，宣告一個函式，其本質是用一套語法去描述一個我們想要表達的物件
  • 同理對於現代前端框架提供的 宣告式 程式設計，所指的並不是某一個 變數或函式，它所表示的是一種 程式設計模式，本質同樣是 框架 提供了一套標準(如 jsx和 vue的模板語法) 供開發者去描述 UI
  • 宣告式在前端應用的體現其實就是這樣一個 函式表示式: UI = Fn(X)，這裡 UI 範指 web頁面，Fn 則是我們編寫的宣告式元件，X 指狀態

例如這段 Vue 模板，我們通常就說它是宣告式的

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

除此之外，你可能還聽說過 命令式，直接看程式碼吧

// app.html
<div id="app">
  <button></button>
</div>

// app.js
let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`
});

把 宣告式 和 命令式 對比起來看，你會發現 命令式 的語句通常是原生語句，而 宣告式 都依賴於框架提供的特性。其實說白了，宣告式 的程式碼 經過編譯/框架執行時 解釋後，也就是一句一句的 命令式 的程式碼了。

由此可以有一個簡單的結論：宣告式程式設計本身是一種理念，一種思想，而宣告式的語法 往往是 某個框架 對 命令式 邏輯的上層抽象，以簡潔的 語法 來表達原本繁瑣的邏輯。

什麼是狀態

嚴格來說，狀態 和 變數不是完全等價的，狀態是變數的一個子集。通常我們把一個具備 可互動性 的變數稱之為狀態，什麼叫 可互動性，看一個例子

如下邏輯中，count 沒有參與頁面互動，僅僅是記憶體中的一個值，對於使用者來說是無感的，通常我們不會稱之為狀態

let count = 0;

for(let i = 0; i < 10; i++) {
    count =+ 1;
}

但如果改寫成這樣，count 將渲染到頁面上，並且按鈕點選會遞增其值，並重新渲染，這時 count 參與到了與使用者的互動過程中，具備了可互動性，通常就可以稱為 狀態

let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`
});

對於 狀態 的解釋不僅限於以上的示例，比如平常業務開發中，決定一個 modal 是否顯示的 變數visible 我們也會稱為 狀態，因為 visible 的變化會引起檢視變更，此類參與 互動 但不會直接渲染到檢視上的 變數，也屬於此範疇。

相關文章