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

緣起

Android開發(fā)中的常見寫法

JQuery中的常見寫法

命令式編程

聲明式編程

React中的常見寫法

Vue的常見寫法

你肯定熟悉響應(yīng)式

試著回答

彩蛋

參考

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

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

同時，redux等狀態(tài)管理組件都是 flux架構(gòu)的實現(xiàn)，也有很多開發(fā)者提出FluxAndroid的概念，但google官方并不承認(rèn)flux的架構(gòu)。這是為什么？

我們經(jīng)?？吹竭@樣的寫法，首先在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");

    }

除此之外，我們還經(jīng)?？匆娺@樣的寫法，比如：

setVisibility(View.VISIBLE);

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

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

獲取到值（不管是從數(shù)據(jù)庫還是網(wǎng)絡(luò)拉?。?/p>

這個值經(jīng)過處理，得到可以目標(biāo)控件需要的值

通過setXXX去設(shè)定該值

然后界面發(fā)生變化

后來我發(fā)現(xiàn)，這樣的模式在JQuery中也是類似的。

先看下這段代碼。

    



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

    
    

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

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

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

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

    
    
    
    


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

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

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

你會發(fā)現(xiàn)網(wǎng)頁內(nèi)容也隨之發(fā)生了改變。

維基百科這樣說：

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

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

上述了兩小節(jié)都是命令式編程。

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

聲明式編程，就是告訴“機器”你想要的是什么(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.

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

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

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

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

"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是聲明式的，以上就是體現(xiàn)聲明式很好的例子。

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

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

this.state = { liked: false };

點擊按鈕之后，觸發(fā)事件，改變state

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

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

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.

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

所以，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的時候，最好不同去想著如何實現(xiàn)某個結(jié)果，而是組件在新的狀態(tài)下應(yīng)該有什么樣的表現(xiàn)。

歇一口氣 ^ __ ^ 歇一口氣

看了React的寫法，知道它是聲明式，那我們來看看Vue是如何體現(xiàn)響應(yīng)式的。

    
    



    

       
{{product}} are in stock
    

    
    

我們在模板中指定

{{product}} are in stock

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

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

app.product = "you input here"

你就會發(fā)現(xiàn)屏幕上的網(wǎng)頁渲染立馬發(fā)生了改變。

這就是響應(yīng)式。

Vue 最獨特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時，視圖會進行更新。

來我們簡單解釋下 Vue 響應(yīng)式系統(tǒng)的底層細(xì)節(jié)。

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

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

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

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

第三，每個Vue Component的render函數(shù)，都都對應(yīng)一個 watcher 實例。

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

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

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

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

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

Android的界面UI是有XML標(biāo)簽定義，和DOM有些不同。

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

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

（歡迎大佬斧正、補充）

redux等狀態(tài)管理組件都是 flux架構(gòu)的實現(xiàn)，也有很多開發(fā)者提出FluxAndroid的概念，但google官方并不承認(rèn)flux的架構(gòu)。這是為什么？

先簡單說明下，Android的架構(gòu)。

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

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

AndroidFlux ——當(dāng)ANDROID遇到了FLUX，架構(gòu)ANDROID應(yīng)用的新方式。
Flux Architecture on Android

RxFlux Android Architecture

Flux Android Architecture Components using Kotlin

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

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

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

放出彩蛋，就是svelte

svelte

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

Imperative programming --維基百科

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

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

Reactivity in Depth --Vue官方文檔

Vue 響應(yīng)式原理白話版

React 不是真正的響應(yīng)式編程，Svelte 才是 --Ovie Okeh