[[401115]]

 近日，在一場關于JSX的討論中，React核心成員「Sebastian Markbåge」(Hooks作者)表示：

他更推崇SwiftUI語法，并認為JSX就是個錯誤。

JSX最早由Facebook提出并推廣，在React中被廣泛用來描述視圖狀態(tài)。

作為一種類XML的JS語法糖，JSX同時兼顧了兩個優(yōu)點：

XML對樹狀結(jié)構優(yōu)秀的表現(xiàn)力

不管是「嵌套」還是「屬性」，JSX都能很自然的描述。

我們可以很容易從如下JSX結(jié)構推導出實際視圖效果：

<div style={{color: '#f00'}}> 
  i am <span>Ka Song</span> 
</div> 

 JS在運行時的靈活

曾有人說：

• JSX就是擁有超能力的HTML

這里的超能力指：JSX作為JS語法糖，可以用JS語法靈活的描述視圖狀態(tài)。

function App({children}) { 
  return ( 
    <div> 
      {children || 'i am empty'} 
    </div> 
  ) 
} 

 作為對比，Vue模版語法的表現(xiàn)力就差很多。

然而，吾之蜜糖彼之砒霜：

受JS語法限制的XML

比如class屬于JS語法keyword，而class在HTML中代表「類名」。

所以當JSX使用className作為「類名」的props時難免讓人困惑。

<div className="container"></div> 

 依賴編譯

JSX需要先編譯為JS才能在宿主環(huán)境執(zhí)行，所以使用JSX描述視圖的框架(比如React)都需要依賴編譯工具。

這增加了項目環(huán)境配置的復雜度。

DSL哪家強?

到這里我們可以發(fā)現(xiàn)，衡量一門DSL(領域相關語言)優(yōu)劣的標準有三點：

• 是否能直觀描述視圖狀態(tài)
• 是否有靈活的編程能力
• 原生支持還是需要編譯

讓我們按這三個維度權衡幾種不同平臺的DSL：

HTML

視圖描述能力：🌟🌟🌟

編程能力：🌟

不需要編譯：🌟

HTML描述視圖能力最強(因為與DOM節(jié)點一一對應)，但是缺乏編程能力。

Pug、Vue、JSX

視圖描述能力：🌟🌟🌟

編程能力：🌟🌟~🌟🌟🌟

[[401116]]

都是在XML基礎上演進的語法糖，擁有強大的描述視圖能力。

他們的區(qū)別在于「編程能力」與「模版語法」的束縛之間取舍。

Flutter

視圖描述能力：🌟

編程能力：🌟🌟🌟🌟

使用函數(shù)調(diào)用的方式描述視圖，編程能力很強。

但是在描述嵌套的組件樹結(jié)構時，函數(shù)調(diào)用不如XML描述能力強。

比如如下HTML結(jié)構：

<div> 
  <p>Hello</p> 
  <p>I am</p> 
  <p>Ka Song</p> 
</div> 

Stack( 
  children: <Widget>[ 
     Text("Hello"), 
     Text("I am"), 
     Text("Ka Song") 
   ], 
) 

SwiftUI與React

SwiftUI作為被蘋果寄予厚望、意圖統(tǒng)領IOS全平臺的DSL。

在保證強大的編程能力同時，也希望在視圖表現(xiàn)力方面做的更好。

接下來我們通過一個簡單的「點擊加一」的計數(shù)器來對比React與SwiftUI語法：

React使用class語法：

class Counter extends React.Component { 
  state = { 
    counter: 0 
  } 
  increment: () => { 
    const {counter} = this.state; 
    this.setState({counter: counter + 1}) 
  } 
  render() { 
    const {counter} = this.state; 
    return ( 
      <> 
        <p>數(shù)字：{counter}</p> 
        <button onClick={this.increment}>點我加一</button> 
      </> 
    ) 
  } 
} 

 SwiftUI：

struct Counter : View { 
    @State var counter = 0 
 
    func increment () { 
        counter += 1 
    } 
 
    var body: some View { 
        VStack { 
            Text("數(shù)字: \(counter)") 
            Button(action: increment) { 
                Text("點我加一") 
            } 
        } 
    } 
} 

可以看到，拋開語法差異，兩個框架的寫法是很類似的。

同時，SwiftUI憑借強大的編程能力，原生實現(xiàn)React當前并不支持的功能：

比如，在React中，子組件要改變父組件的狀態(tài)，需要父組件將「狀態(tài)」與「改變狀態(tài)的方法」傳遞給子組件。

子組件調(diào)用「改變狀態(tài)的方法」通知父組件狀態(tài)變化，父組件再傳遞變化后的「狀態(tài)」給子組件。

這種方式在React中被稱為「受控組件」。

在SwiftUI中，子組件只需要將父組件傳遞的狀態(tài)申明為@Binding，就能達到與父組件該狀態(tài)「雙向綁定」的效果。

比如上例的counter：

// 從 
@State var counter = 0 
// 變?yōu)?nbsp;
@Binding var counter 

則計數(shù)器接受父組件傳遞的counter狀態(tài)，子組件counter狀態(tài)改變后會作用于父組件counter狀態(tài)。

你更喜歡哪種DSL

從2013年5月29日React誕生到現(xiàn)在。

經(jīng)過8年的教育，大部分React開發(fā)者已經(jīng)接受JSX。

但是，這期間也不斷有人提出JSX的替代方案。

比如react-hyperscript。

隨著SwiftUI熱度提升，更是有人提出用其替代React中的JSX：

也有人做出模型experimental-react-like-framework

你喜歡JSX么?你覺得未來他會被誰取代?或者他會取代誰?