摘要：中的常見寫法先看下這段代碼。聲明式編程，就是告訴機器你想要的是什么，讓機器想出如何去做。最獨特的特性之一，是其非侵入性的響應式系統。的縮寫將遍歷此對象所有的屬性。這一過程被稱為依賴收集。組件的顯示，數據的體現大部分都是由承載，傳遞。

緣起

Android開發中的常見寫法

JQuery中的常見寫法

命令式編程

聲明式編程

React中的常見寫法

Vue的常見寫法

你肯定熟悉響應式

試著回答

彩蛋

參考

筆者剛入行的時候，做的是Android客戶端開發。雖然從事的時間不長，但稍微了解一點基本的概念。后來陰差陽錯從事Web開發，一直到現在，所以現在多多少少對Web領域有一丁點的見解。因為這樣，所以有時候會思考下二者的共性，想找一下二者相同的點。最近有兩個問題，一直縈繞著：

React中有state，props的概念。組件component的顯示，數據的體現 大部分都是由state承載，props傳遞。而android基本都是通過setXX去控制組件和數據。為什么會有這樣的差異？

同時，redux等狀態管理組件都是 flux架構的實現，也有很多開發者提出FluxAndroid的概念，但google官方并不承認flux的架構。這是為什么？

我們經常看到這樣的寫法，首先在xml文件中定義我們的布局文件，指定id等屬性。

同時，在Activity中通過findViewById去獲取控件的引用，然后進行一系列操作，比如setText等

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = (TextView) findViewById(R.id.textview);
        TextView textView = new TextView(this);
        textView.setText("Hey, one more TextView");

    }

除此之外，我們還經常看見這樣的寫法，比如：

setVisibility(View.VISIBLE);

imageview.setBackgroundColor(Color.rgb(213, 0, 0));

你有沒有發現，這些寫法有一個共性，就是都是通過setXXX去設定值。也就是說，我們開發者在操作的時候，有這樣的一個模式：

獲取到值（不管是從數據庫還是網絡拉取）

這個值經過處理，得到可以目標控件需要的值

通過setXXX去設定該值

然后界面發生變化

后來我發現，這樣的模式在JQuery中也是類似的。

先看下這段代碼。

    



    
例子1
    
如果你點我，我就會消失。
    
繼續點我!
    
接著點我!

    
    

首先，我們先寫了四行HTML代碼。
然后，通過JQuery去操作，注意我們的操作方式。

我們通過$("p") 去獲取document對象中的

獲取到元素后，通過$(this).hide()對該元素進行操作。這像不像 textView.setText("Hey, one more TextView");

如果覺得這段代碼不直觀，來看這個。

    
    
    
    


這是段落。
這是另一個段落。
Input field: 
設置文本
設置 HTML
設置值

同時，你可以再本地打開上面的代碼，在瀏覽器中預覽，然后打開開發者模式，在控制臺中輸入，

$("#test3").val("Dolly Ducrrrrk");

你會發現網頁內容也隨之發生了改變。

維基百科這樣說：

Imperative programming is a programming paradigm that uses statements that change a program’s state.

簡單理解，命令式編程，就是命令“機器”如何去做事情(how)，這樣不管你想要的是什么(what)，它都會按照你的命令實現。

上述了兩小節都是命令式編程。

提到命令式編程，不得不說下聲明式編程。

聲明式編程，就是告訴“機器”你想要的是什么(what)，讓機器想出如何去做(how)。

打個比方：

Declarative Programming is like asking your friend to draw a landscape. You don’t care how they draw it, that’s up to them.
Imperative Programming is like your friend listening to Bob Ross tell them how to paint a landscape. While good ole Bob Ross isn’t exactly commanding, he is giving them step by step directions to get the desired result.

聲明式就像你告訴你朋友畫一幅畫，你不用去管他怎么畫的細節

命令式就像按照你的命令，你朋友一步步把畫畫出來

如果你覺得有點分不清楚二者區別，別著急，先看下下面的案例。

（完成源碼將放在文末可下載）

"use strict";

const e = React.createElement;

class LikeButton extends React.Component {
  //https://www.cnblogs.com/johnzhu/p/9016277.html
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return "You liked this.";
    }

    return e(
      "button",
      { onClick: () => this.setState({ liked: true }) },
      "Like"
    );
  }
}

const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(e(LikeButton), domContainer);

React是聲明式的，以上就是體現聲明式很好的例子。

在我們的render方法中，渲染一個按鈕，按鈕名字為“Like”。

按鈕的狀態（也就是文字內容）受state控制，初始化的state為一個JavaScript對象。

this.state = { liked: false };

點擊按鈕之后，觸發事件，改變state

{ onClick: () => this.setState({ liked: true }) }

好，state在點擊前后發生改變，按鈕的文字是由state控制。
換句話說，我們并沒有直接操作DOM去改變按鈕的文字內容，只是通過改變state的狀態。
而state不同的值描述了按鈕在不同情況下應該如何表現不同的內容。

The differences here may be subtle. 
The React example never actually touches an element. it simply declares an element should be rendered given our current state. It does not actually manipulate the DOM itself.

和命令式的區別有點模糊。React沒有直接操作元素，它只是聲明了元素如何在給定的狀態下渲染出特定的結果。

所以，React的思想和JQuery有很大不同。

When writing React, it’s often good not to think of how you want to accomplish a result, but instead what the component should look like in it’s new state.

使用React的時候，最好不同去想著如何實現某個結果，而是組件在新的狀態下應該有什么樣的表現。

歇一口氣 ^ __ ^ 歇一口氣

看了React的寫法，知道它是聲明式，那我們來看看Vue是如何體現響應式的。

    
    



    

       
{{product}} are in stock
    

    
    

我們在模板中指定

{{product}} are in stock

然后再Vue實例中只要product有值，立馬就渲染出來。

為了更好的演示，請你打開上述代碼，在瀏覽器中預覽，然后打開控制臺。輸入

app.product = "you input here"

你就會發現屏幕上的網頁渲染立馬發生了改變。

這就是響應式。

Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。

來我們簡單解釋下 Vue 響應式系統的底層細節。

第一，還記得我們通過下面的代碼，把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項。

           const app = new Vue({
            el: "#app",  /*element的縮寫*/
            data: {
                product: "Boots"
            }
        })

Vue 將遍歷此對象所有的屬性。

第二，Vue使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。

第三，每個Vue Component的render函數，都都對應一個 watcher 實例。

第四，當 Vue Component render 函數被執行的時候, data 上會被 觸碰(touch), 即被讀, getter 方法會被調用, 此時 Vue 會去記錄此 Vue component 所依賴的所有 data。(這一過程被稱為依賴收集)。

第五，data 被改動時（主要是用戶操作）, 即被寫, setter 方法會被調用, 此時 Vue 會去通知所有依賴于此 data 的組件去調用他們的 render 函數進行更新。

還記當時風靡一時的RxJava, RxAndroid嘛？如今又有了RxKotlin,RxDart。（提醒和我一樣，做過Android開發的同學們，哈哈~）
他們都是ReactiveX家族的一員。

React中有state，props的概念。組件component的顯示，數據的體現 大部分都是由state承載，props傳遞。而android基本都是通過setXX去控制組件和數據。為什么會有這樣的差異？

個人愚見，Android客戶端和Web開發中，有這么幾點不同：

Android的界面UI是有XML標簽定義，和DOM有些不同。

瀏覽器刷新的時候，整個DOM結構都會更新，而Android沒有刷新整個頁面的概念，在Android中，你是通過measure (測量)、layout （定位）、draw （繪制）去顯示一個View。

不同于React中的Component，Android中的View，比如ImageView、TextView 本身內置了很多方法來控制自身屬性，比如setBackground、setText。

（歡迎大佬斧正、補充）

redux等狀態管理組件都是 flux架構的實現，也有很多開發者提出FluxAndroid的概念，但google官方并不承認flux的架構。這是為什么？

先簡單說明下，Android的架構。

Android架構合集
這篇文章中列舉了很多Android架構，包括官方google的，同時也有Flux架構模式。

很多開發者受Flux的啟發，寫了適用Android的Flux架構模式。
比如下面幾篇文章。

AndroidFlux ——當ANDROID遇到了FLUX，架構ANDROID應用的新方式。
Flux Architecture on Android

RxFlux Android Architecture

Flux Android Architecture Components using Kotlin

這個問題我還沒有很好的答案。我自己以Flux的架構模式去做過了Android的實踐，由于Android Activity等自身的組件，使得用Flux架構反而比較繁瑣，有點過度設計的味道。但究竟為何Google官方不推薦，歡迎大家補充~

這就是 Dan 所說的，React 并不是完全的響應式設計的意思。React 需要你手動跟蹤應用數據，并在數據變化時告訴 React，這也意味著你得做更多工作。

難道這就是Vue這個響應式框架近幾年越來越流行的原因？

放出彩蛋，就是svelte

svelte

哦對了，文中所有的源碼在這里哈
點我下載

Imperative programming --維基百科

[Declarative vs Imperative Programming --Ian Mundy
](https://codeburst.io/declarat...

聲明式和命令式 --小豬ab

Reactivity in Depth --Vue官方文檔

Vue 響應式原理白話版

React 不是真正的響應式編程，Svelte 才是 --Ovie Okeh