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

緣起

Android開(kāi)發(fā)中的常見(jiàn)寫(xiě)法

JQuery中的常見(jiàn)寫(xiě)法

命令式編程

聲明式編程

React中的常見(jiàn)寫(xiě)法

Vue的常見(jiàn)寫(xiě)法

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

試著回答

彩蛋

參考

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

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

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

我們經(jīng)?？吹竭@樣的寫(xiě)法，首先在xml文件中定義我們的布局文件，指定id等屬性。

同時(shí)，在Activity中通過(guò)findViewById去獲取控件的引用，然后進(jìn)行一系列操作，比如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)常看見(jiàn)這樣的寫(xiě)法，比如：

setVisibility(View.VISIBLE);

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

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

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

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

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

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

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

先看下這段代碼。

    



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

    
    

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

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

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

如果覺(jué)得這段代碼不直觀，來(lái)看這個(gè)。

    
    
    
    


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

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

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

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

維基百科這樣說(shuō)：

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

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

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

提到命令式編程，不得不說(shuō)下聲明式編程。

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

打個(gè)比方：

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.

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

命令式就像按照你的命令，你朋友一步步把畫(huà)畫(huà)出來(lái)

如果你覺(jué)得有點(diǎn)分不清楚二者區(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方法中，渲染一個(gè)按鈕，按鈕名字為“Like”。

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

this.state = { liked: false };

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

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

好，state在點(diǎn)擊前后發(fā)生改變，按鈕的文字是由state控制。
換句話說(shuō)，我們并沒(méi)有直接操作DOM去改變按鈕的文字內(nèi)容，只是通過(guò)改變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ū)別有點(diǎn)模糊。React沒(méi)有直接操作元素，它只是聲明了元素如何在給定的狀態(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的時(shí)候，最好不同去想著如何實(shí)現(xiàn)某個(gè)結(jié)果，而是組件在新的狀態(tài)下應(yīng)該有什么樣的表現(xiàn)。

歇一口氣 ^ __ ^ 歇一口氣

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

    
    



    

       
{{product}} are in stock
    

    
    

我們?cè)谀０逯兄付?/p>

{{product}} are in stock

然后再Vue實(shí)例中只要product有值，立馬就渲染出來(lái)。

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

app.product = "you input here"

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

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

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

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

第一，還記得我們通過(guò)下面的代碼，把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)。

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

Vue 將遍歷此對(duì)象所有的屬性。

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

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

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

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

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

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

個(gè)人愚見(jiàn)，Android客戶端和Web開(kāi)發(fā)中，有這么幾點(diǎn)不同：

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

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

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

（歡迎大佬斧正、補(bǔ)充）

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

先簡(jiǎn)單說(shuō)明下，Android的架構(gòu)。

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

很多開(kāi)發(fā)者受Flux的啟發(fā)，寫(xiě)了適用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

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

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

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

放出彩蛋，就是svelte

svelte

哦對(duì)了，文中所有的源碼在這里哈
點(diǎn)我下載

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