摘要：提倡在可視設(shè)計(jì)器中開(kāi)發(fā)用戶界面，輸出轉(zhuǎn)義標(biāo)簽，而非。被官方忽視的開(kāi)發(fā)方法區(qū)別于其它前端框架的關(guān)鍵特色是可視化設(shè)計(jì)，因?yàn)榕c混寫(xiě)，不能直接支持可視化設(shè)計(jì)。最終返回的是，還是，或是其它是動(dòng)態(tài)變化的。官方為此提供一種上舉的解決方案，參見(jiàn)。

Shadow Widget 提倡在可視設(shè)計(jì)器中開(kāi)發(fā)用戶界面，輸出轉(zhuǎn)義標(biāo)簽，而非 JSX。許多童鞋可能不知道 SW 同樣支持用 JSX 設(shè)計(jì)界面，開(kāi)發(fā)體驗(yàn)比原生 React 編程好出很多，本文就介紹這方面知識(shí)。

?

Shadow Widget 區(qū)別于其它前端框架的關(guān)鍵特色是可視化設(shè)計(jì)，因?yàn)?JSX 與 javascript 混寫(xiě)，不能直接支持可視化設(shè)計(jì)。所以，SW 用 “轉(zhuǎn)義標(biāo)簽” 表達(dá)可視設(shè)計(jì)的輸出，因?yàn)?SW 強(qiáng)調(diào)可視化，所以如何運(yùn)用 JSX 的內(nèi)容，在官方文檔中被弱化了，有一些零星介紹，分散在手冊(cè)各個(gè)章節(jié)，本文將它們串接起來(lái)講。

在 Shadow Widget 下做開(kāi)發(fā)，既可以是主流的 “正交框架” 模式（也就是遵循 MVVM 思路設(shè)計(jì)可視界面，再用 Flux 框架組織橫向數(shù)據(jù)流的開(kāi)發(fā)方式），也可以完全順從 React 原生模式，只把 SW 看作更好的 lib 庫(kù)來(lái)使用。**下面我們結(jié)合代碼實(shí)例，講解后一開(kāi)發(fā)方式。

由于 JSX 界面設(shè)計(jì)與用鼠標(biāo)拖拉配置界面的設(shè)計(jì)是等價(jià)的，我們以 React 原生模式做開(kāi)發(fā)，相對(duì) SW 主流方式，主要損失可視化的直觀特性，其它并不損失。當(dāng)然，目前使用 JSX 還得借助 Babel 轉(zhuǎn)譯環(huán)境，搭建 "Babel + Browserify" 或 "Babel + Webpack" 開(kāi)發(fā)環(huán)境是不得已的選擇。

如何創(chuàng)建新工程及如何搭建 Browerify 或 Webpack 環(huán)境，請(qǐng)參考《Shadow Widget 用戶手冊(cè)》的 “3.1 搭建工程環(huán)境” 一章。

1) json-x

json-x 是 “轉(zhuǎn)義標(biāo)簽” 的數(shù)據(jù)化形式，用 javascript 的 Array 數(shù)據(jù)表達(dá)各層嵌套節(jié)點(diǎn)。json-x 與轉(zhuǎn)義標(biāo)簽的關(guān)系，就像 xml 與 HTML DOM 的關(guān)系。json-x 與 JSX 是對(duì)應(yīng)的，是同一類東西，不過(guò) json-x 不如 JSX 易讀。

?

2) WTC（Widget Template Class，構(gòu)件模板類）

WTC 對(duì)應(yīng)于 React 中各 Component 的 class 類定義。React 要求這么定義：

class MyButton extends React.Component {
  constructor(props) {
    // ...
  }
  
  componentDidMount() {
    // ...
  }

  render() {
    // ...
  }
}

WTC 要求這么定義（必須從已有的 WTC 類繼承，而且只能用 ES6+ 語(yǔ)法才做得到）：

class MyButton_ extends T.Button_ {
  constructor(name,desc) {
    super(name,desc);
  }
  
  getDefaultProps() {
    var props = super.getDefaultProps();
    // props.attr = value;
    return props;
  }

  getInitialState() {
    var state = super.getInitialState();
    // ...
    return state;
  }

  componentDidMount() {
    // ...
  }
  
  $onClick: function(event) {
    alert("clicked");
  }
}

WTC 不是 React class，不能在 JSX 中直接使用，應(yīng)先轉(zhuǎn)成 React class。

?

3) render 函數(shù)

如果想把 React 程序?qū)懙酶鼑?yán)謹(jǐn)，減少 Side Effects，應(yīng)該在 render() 函數(shù)集中處理各種控制邏輯，對(duì)其它函數(shù)的功能，諸如 getInitialState, componentDidMount, componentWillUnmount 等，不妨簡(jiǎn)單這么理解：為 render() 提供配置服務(wù)。當(dāng)配置縮簡(jiǎn)到可以忽略時(shí)，Component 定義便退化為單個(gè)函數(shù)（即 Functional Component），該函數(shù)等效提供 render 功能。

Shadow Widget 按這個(gè)思路，把控制邏輯集中在 render() 函數(shù)中處理，包括：duals 雙源屬性的偵聽(tīng)、觸發(fā)、聯(lián)動(dòng)，$if, $for 等控制指令與可計(jì)算屬性自動(dòng)更新等。因?yàn)閺?fù)雜性在此封裝，render 不便公開(kāi)給用戶定制，另外，Shadow Widget 為了支持可視化設(shè)計(jì)，盡量將 render() 中的邏輯控制分解，分離出屬性項(xiàng)供配置，所以，Shadow Widget 不再鼓勵(lì)用戶自定義 render() 函數(shù)，雖然大家可以 hack 各 WTC 的 render 實(shí)現(xiàn)過(guò)程，然后仿照著自己寫(xiě)一個(gè)，但這不是建議的做法。

借助以下途徑，在 Shadow Widget 可實(shí)現(xiàn) render 過(guò)程的邏輯控制：

由 props.attr, duals.attr, state.attr 取值控制當(dāng)前節(jié)點(diǎn)的界面表現(xiàn)
其中，props.attr 反映了 Component 生存周期內(nèi)的不變量，duals.attr 是可變量，state.attr 也是可變量，傾向用作節(jié)點(diǎn)內(nèi)私有控制（不供其它節(jié)點(diǎn)調(diào)用）。

在 render 渲染之外，調(diào)用 comp.setChild() 來(lái)增、刪、修改子節(jié)點(diǎn)
即：不在 render() 調(diào)用的過(guò)程之中調(diào)用 comp.setChild()

在 idSetter 函數(shù)中，調(diào)用 utils.setChildren() 來(lái)增、刪、修改子節(jié)點(diǎn)

上面 3 點(diǎn)，第一點(diǎn)比較好理解，第二點(diǎn)是 Shadow Widget 增加的，原生 React 不提供這種操作，比方說(shuō)，在一個(gè)頁(yè)面提交一條反饋意見(jiàn)，用戶可以點(diǎn)一下 “刪除” 按鈕可刪掉剛提交的意見(jiàn)。若用原始 javascript 實(shí)現(xiàn)，大概用這么一條語(yǔ)句：

commentNode.parentNode.removeChild(commentNode);

原生 React 處理這種需求要稍微繞一下，給 commentNode 的父節(jié)點(diǎn)發(fā)個(gè) "刪除指令"，然后由它代為實(shí)施 "刪除操作"。Shadow Widget 提供 comp.setChild() 相當(dāng)于補(bǔ)回 javascript 本可直接實(shí)現(xiàn)的操作。

上面第三點(diǎn)，在傳入的 props.id__ 函數(shù)中，可以通過(guò)修改 duals.attr 與 state.attr 改變本節(jié)點(diǎn)的顯示效果，還能通過(guò)調(diào)用 utils.setChildren() 來(lái)改變子節(jié)點(diǎn)怎么顯示。其實(shí)現(xiàn)原理與在 render() 函數(shù)中寫(xiě)代碼是等價(jià)的，將在后文細(xì)述。

同為定義 component 類，WTC 繼承鏈與 React class 繼承鏈?zhǔn)遣幌喔傻膬蓷l鏈，前者起始于 T.Widget_，后者起始于 React.Component。當(dāng)前者 WTC 類實(shí)例調(diào)用 _createClass() 得到值，才與后者等效。

比如：

var AbstractButton = new MyButton_();         // MyButton_ is WTC
var MyButton = AbstractButton._createClass(); // MyButton is React class
var jsx = test;

var MyButton2 = AbstractButton._createClass( {
  $onClick: function(event) {
    alert("another onClick");
  }
});
var jsx2 = test2;

var MyButton3 = T.Button._createClass( {
  $onClick: function(event) {
    alert("yet another onClick");
  }
});
var jsx3 = test3;

簡(jiǎn)單理解 WTC，可把它看作 React class 的 class 定義，即，它是一種用于生成 React class 的模板，所以 WTC 是 "構(gòu)件模板" 的類（Widget Template Class）。

我們之所以要插入 “模板” 一級(jí)的抽像物，主要為了適應(yīng)可視化編程，Widget Template 不只用來(lái)生成 React class，也為可視設(shè)計(jì)器提供支持。另外，一個(gè) Component 的行為在 WTC 中定義，還是在 _createClass(defs) 的傳入?yún)?shù)（即投影類）定義是可選的，比如上例中 $onClick 事件函數(shù)，在哪個(gè)地方都可定義。這么設(shè)計(jì)的好處是：習(xí)慣用 ES6 編碼的童鞋，在 WTC 編程，習(xí)慣用 ES5 的，用投影類編程，不必搭建 Babel 轉(zhuǎn)譯環(huán)境。

Shadow Widget 提供 utils.getWTC() 接口用來(lái)批量從 T 模塊取得 React class，比如：

var t = utils.getWTC("*"); // or, utils.getWTC(["Panel","P"])

var jsx = ( 
  Hello, world!
  Test
 );

請(qǐng)注意，使用來(lái)源于 WTC 的 React class 構(gòu)造界面，系統(tǒng)會(huì)自動(dòng)生成一顆樹(shù)，各節(jié)點(diǎn)按層次串接起來(lái)，任何非 WTC 節(jié)點(diǎn)都不能成為 WTC 節(jié)點(diǎn)的父節(jié)點(diǎn)，反過(guò)來(lái)可以，即：非 WTC 節(jié)點(diǎn)能掛到 WTC 節(jié)點(diǎn)下，但 WTC 節(jié)點(diǎn)不能掛到非 WTC 節(jié)點(diǎn)下。比如上面 button 不是 WTC 節(jié)點(diǎn)，可以掛到 WTC 節(jié)點(diǎn) t.P 之下，成為末梢節(jié)點(diǎn)。

React 有兩種純渲染函數(shù)，其一是 "Stateless Functional Component"（SFC），如下：

function HelloMessage(props) {
  return 
Hello {props.name}
;
}

還有一種 "Pure Render Component"（PRC），所謂 pure 是指，如果 props 及 state 不變，則 render 結(jié)果不變。比如：

import PureRender from "react-addons-pure-render-mixin";

class HelloComponent extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRender.shouldComponentUpdate.bind(this);
  }
  
  render() {
    return 
Hello {this.props.name}
;
  }
}

SFC 似乎簡(jiǎn)單，易讀易維護(hù)，也方便 "Lifting State Up"（后文有論述），但 SFC 比 PRC 缺少用 shouldComponentUpdate() 避免重復(fù)刷新，性能會(huì)受影響，另外，JSX 中把 SFC 的函數(shù)用作 tag，動(dòng)詞用作名詞，閃著一絲詭異的光。

Shadow Widget 開(kāi)創(chuàng)性的設(shè)計(jì) idSetter 機(jī)制，將 SFC 與 PRC 的優(yōu)點(diǎn)結(jié)合起來(lái)了。一方面，你不需要非得用 class 類定義一個(gè) Component，在層層嵌套的函數(shù)式風(fēng)格中，不宜隨便找個(gè)地方就定義 class，另外，idSetter 是函數(shù)，在一個(gè)函數(shù)中定義 Component 所有行為。

比如：

function btn__(value,oldValue) {
  if (value <= 2) {
    if (value == 1) {  // init process
    }
    else if (value == 2) { // mount
    }
    else if (value == 0) { // unmount
    }
    return;
  }

  // rendering for evey render()
  // ...
}

var jsx = test

若用 SFC 方式編程，先定義的一個(gè) MakeButton 函數(shù)，然后用 test 描述 UI 界面。MakeButton() 最終返回的 tag 是 button，還是 span，或是其它是動(dòng)態(tài)變化的。但這里 test 卻是明確指定 tag 是 MyButton，很直接。

設(shè)計(jì)界面時(shí)，手頭的 tag 標(biāo)簽相當(dāng)于食材（比如 “米飯”），給各 tag 指定各種屬性來(lái)控制它的外觀，這是最直接的設(shè)計(jì)方式。Stateless Functional Component 是 “紫菜包飯”，用函數(shù)形式包裹食材，idSetter 方式則相當(dāng)于 “飯包紫菜包飯”，外觀表現(xiàn)仍是 “米飯”，內(nèi)層用紫菜包裹過(guò)。

傳遞給 $id__ 的函數(shù)是 idSetter，這是全能的，因?yàn)橄到y(tǒng)在基類的 componentWillMount, componentDidMount, componentWillUnmount, render 這 4 個(gè)函數(shù)中增加了對(duì) idSetter 函數(shù)自動(dòng)調(diào)用。其中，value <= 2 下的 3 個(gè)條件分支，分別等效于在 componentWillMount, componentDidMount, componentWillUnmount 中編碼，其它條件（即 value > 2）相當(dāng)于在 render 函數(shù)中編碼。

這么處理有幾個(gè)好處：

增強(qiáng)了功能，又契合函數(shù)式編程風(fēng)格
Functional Component 功能受限，因?yàn)椴荒懿迦?componentDidMount, componentWillUnmount 時(shí)的處理，若用 React class 定義一個(gè) Component 的行為，你擁有 componentDidMount, componentWillUnmount 等專項(xiàng)處理函數(shù)，但 React class 定義是靜態(tài)聲明，非單項(xiàng)函數(shù)，把 class 定義在層層嵌套的任一函數(shù)中，比較別扭。idSetter 同時(shí)克服了這兩種缺陷。

便于 lifting state up
當(dāng)我們采用 JSX 描述界面時(shí)，行為定義（屬性與動(dòng)作函數(shù)）與虛擬 DOM 描述混在一起，這時(shí)僅依賴 props.attr 逐層傳遞的數(shù)據(jù)共享方式，用起來(lái)不方便。React 官方為此提供一種 “上舉 state” 的解決方案，參見(jiàn) Lifting state up。

我們?nèi)?React 官方 Lifting State Up 一文介紹的，判斷溫度是否達(dá)到沸點(diǎn)的場(chǎng)景，舉個(gè)例子：

var React = require("react");
var ReactDOM = require("react-dom");
var W = require("shadow-widget");

var main = W.$main, utils = W.$utils, ex = W.$ex;
var idSetter = W.$idSetter, t = utils.getWTC("*");

function calculatorUI() {
  var selfComp = null, verdictComp = null;
  var scaleNames = { c:"Celsius", f:"Fahrenheit" };
  
  function onInputChange(value,oldValue) {
    var scale = this.parentOf().props.scale || "c";  // "c" or "f"
    var degree = parseFloat(value) || 0; // take NaN as 0
    selfComp.duals.temperature = [scale,degree];
  }
  
  function calculator__(value,oldValue) {
    if (value <= 2) {
      if (value == 1) {      // init
        selfComp = this;
        this.defineDual("temperature", function(value,oldValue) {
          if (Array.isArray(value) && verdictComp) {
            var scale = value[0], degree = value[1];
            var isBoil = degree >= (scale == "c"?100:212);
            verdictComp.duals["html."] = isBoil?
              "The water would boil.":
              "The water would not boil.";
          }
        });
      }
      else if (value == 2) { // mount
        verdictComp = this.componentOf("verdict");
        
        var field = this.componentOf("field");
        var inputComp = field.componentOf("input");
        var legend = field.componentOf("legend");
        var sScale = field.props.scale || "c";
        legend.duals["html."] = "Temperature in " + scaleNames[sScale];
        
        inputComp.listen("value",onInputChange.bind(inputComp));
        selfComp.duals.temperature = [ sScale,
          parseFloat(inputComp.duals.value) || 0
        ];
      }
      else if (value == 0) { // unmount
        selfComp = verdictComp = null;
      }
      return;
    }
  }
  
  return ( 
    
      
      
    
    
   );
}

main.$onLoad.push( function() {
  var bodyComp = W.body.component;
  var jsx = calculatorUI();
  bodyComp.setChild(jsx);
});

在 Flux 框架中，由 Store 直接驅(qū)動(dòng)的那個(gè) View 也叫 Controller View，其下層由各層 View 由 Controller View 往下逐層傳數(shù)據(jù)來(lái)驅(qū)動(dòng)。當(dāng) Store + Controller View 的處理邏輯越集中，可理解性就越好，編碼與維護(hù)也越容易。反過(guò)來(lái)，如果 Controller View 的下層節(jié)點(diǎn)還處理復(fù)雜的控制邏輯，你就不得不將它設(shè)計(jì)成 "Store + Controller View"，程序復(fù)雜性無(wú)疑會(huì)增加。

Shadow Widget 的 "Lift State Up" 比 React 原生方式更好用。

1) 首先，Shadow Widget 有雙源屬性，更多過(guò)程處理轉(zhuǎn)為對(duì) duals 屬性的讀寫(xiě)，更簡(jiǎn)單，更直接，比如上面 legend 節(jié)點(diǎn)，用 legend.duals["html."] = sDesc 直接改變界面文本，是外掛的，若在 render 函數(shù)中 return {sDesc} 則是過(guò)程處理，是內(nèi)嵌的，不利于將子節(jié)點(diǎn)業(yè)務(wù)邏輯提升到父節(jié)點(diǎn)。

2) 其次，雙源屬性的 listen 機(jī)制，也有助于 "Lift State Up"，比如上面 inputComp.listen("value",onInputChange)，在 輸入框輸入文本將驅(qū)動(dòng) onInputChange 調(diào)用，有關(guān)響應(yīng)函數(shù)能輕松 "Lift Up"。

3) 還有，idSetter 是函數(shù)，函數(shù)套函數(shù)很容易，很自然，如果下層節(jié)點(diǎn)需要處理復(fù)雜邏輯，里層嵌套定義另一個(gè) idSetter 函數(shù)便可。我們可以把存在關(guān)聯(lián)的上下多層節(jié)點(diǎn)的邏輯控制代碼，都納入外層節(jié)點(diǎn)的 idSetter 函數(shù)中。

在 idSetter 函數(shù)中編寫(xiě)代碼，等效于在 React class 的 render 函數(shù)中編碼。調(diào)用 render 函數(shù)，最后返回 “本節(jié)點(diǎn)定義”，idSetter 函數(shù)實(shí)際在 render() 調(diào)用中被調(diào)起的，相當(dāng)于在 render() 入口位置，先調(diào)用 idSetter 函數(shù)。等效代碼如下所示：

function id__(comp) { // will call idSetter()
  // comp.state.xxx = xxx;
  // comp.$gui.comps = xxx;
}

class NewWTC extends T.BaseWTC_ {
  // ...
  render() {
    id__(this);
    var tagName = xxx, props = xxx, children = comp.$gui.comps;
    return React.createElement(tagName,props,children);
  }
}

本處代碼僅為概要示例，以偽碼方式解釋工作原理，xxx 表示省略過(guò)程的處理結(jié)果。其中嵌入的 id__ 函數(shù)會(huì)調(diào)用前面介紹的 idSetter 函數(shù)，只要在 idSetter 函數(shù)中本節(jié)點(diǎn)屬性更改，及針對(duì)子節(jié)點(diǎn)的更改被保存，render() 根據(jù)修改過(guò)的信息生成 React Element，就達(dá)到讓 idSetter 中編碼與 render 中編碼等效的目標(biāo)。

與在 render 中編碼等效的 idSetter 函數(shù)舉例：

var fieldWidth = 0.9999;
var sTitle = "Temperature in Celsius";

function fieldset__(value,oldValue) {
  if (value <= 2) {
    // ...
    return;
  }
  
  this.duals.width = fieldWidth;
  utils.setChildren(this, [
    {sTitle} ,
    
  ]);
}

函數(shù) utils.setChildren() 用來(lái)設(shè)置或更新子節(jié)點(diǎn)定義，需注意，各級(jí)子節(jié)點(diǎn)應(yīng)指定 key 值，如果不指定，系統(tǒng)會(huì)認(rèn)為你要?jiǎng)?chuàng)建新節(jié)點(diǎn)，而不是更新已存在節(jié)點(diǎn)。

盡管在 idSetter 的 value > 2 條件段編碼，等效于在 render 中編程，大部分情況下我們不必這么做（也盡量避免這么做）。因?yàn)?Shadow Widget 的雙源屬性功能很強(qiáng)大，邏輯控制總能分解的，把控制分解到雙源屬性的 setter 函數(shù)，或偵聽(tīng)數(shù)據(jù)源變化來(lái)驅(qū)動(dòng)特定動(dòng)作，都能實(shí)現(xiàn)等效功能。這么細(xì)化分解，代碼更易理解，更好維護(hù)。

即便放棄 Shadow Widget 的可視化開(kāi)發(fā)特性，只把它當(dāng)作一個(gè)常規(guī)的 lib 庫(kù)使用也是很有價(jià)值的，主要表現(xiàn)在兩方面：

Shadow Widget 在虛擬 DOM 之上對(duì)四種構(gòu)件關(guān)系（即：順序、包含、導(dǎo)航、層疊）做了封裝，像面板、導(dǎo)航、選項(xiàng)構(gòu)件、彈窗等常用構(gòu)件已現(xiàn)成可用，構(gòu)造 GUI 更加便利。

JSX 與 idSetter 結(jié)合使用，既維持函數(shù)式編程風(fēng)格，也克服原有 React 開(kāi)發(fā)過(guò)于 "函數(shù)式" 的缺陷。

過(guò)于 “函數(shù)式” 對(duì)于界面類開(kāi)發(fā)肯定不好，比如 UI 設(shè)計(jì)時(shí)，我們想擺一個(gè)文本框，再擺一個(gè)按鈕，分解設(shè)計(jì)的思路是，文本輸入變化了（onChange）該做什么，文本框輸入完成（鍵入了回車鍵）該做什么，按鈕被點(diǎn)擊后該怎么響應(yīng)。細(xì)化設(shè)計(jì)的思考過(guò)程，是從界面一個(gè)個(gè)可視的 Component 出發(fā)的，是按對(duì)象化方式做分析的。不管你的代碼寫(xiě)成啥樣，設(shè)計(jì)過(guò)程仍離不開(kāi)一個(gè)個(gè)對(duì)象（如文本框、按鈕等），越是高層設(shè)計(jì)越是如此。

由于 React 偏愛(ài)函數(shù)式編程，加上 Flux 強(qiáng)化了數(shù)據(jù)流設(shè)計(jì)，容易引導(dǎo)大家一開(kāi)始就從數(shù)據(jù)設(shè)計(jì)入手，著眼于數(shù)據(jù)如何分解、如何傳遞、如何驅(qū)動(dòng)響應(yīng)函數(shù)等。采用 Shadow Widget 后，產(chǎn)品開(kāi)發(fā)會(huì)往面向?qū)ο笤O(shè)計(jì)拉回一些，把握這一點(diǎn)就容易理解 Shadow Widget 的設(shè)計(jì)精髓了。

本專欄歷史文章：

介紹一項(xiàng)讓 React 可以與 Vue 抗衡的技術(shù)

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之一：React 三宗罪）

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之二：分離界面設(shè)計(jì)）

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之三：雙源屬性與數(shù)據(jù)驅(qū)動(dòng)）

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之四：flux、mvc、mvvm）

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之五：指令式界面設(shè)計(jì)）

React 可視化開(kāi)發(fā)工具 Shadow Widget 非正經(jīng)入門(mén)（之六：markdown）