React核心成员表示：JSX就是个错误

不念不忘少年蓝@ 2022-10-09 00:53 141阅读 0赞

近日，在一场关于`JSX`的讨论中，`React`核心成员**「Sebastian Markbåge」**（`Hooks`作者）表示：

他更推崇`SwiftUI`语法，并认为`JSX`就是个错误。

![5207c6d87ddc8192bf7801cc8b995b06.png][]

`JSX`最早由`Facebook`提出并推广，在`React`中被广泛用来描述视图状态。

作为一种类`XML`的`JS`语法糖，`JSX`同时兼顾了两个优点：

### `XML`对树状结构优秀的表现力 ###

不管是**「嵌套」**还是**「属性」**，`JSX`都能很自然的描述。

我们可以很容易从如下`JSX`结构推导出实际视图效果：

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

### `JS`在运行时的灵活 ###

曾有人说：

> `JSX`就是拥有超能力的`HTML`

这里的超能力指：`JSX`作为`JS`语法糖，可以用`JS`语法灵活的描述视图状态。

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

作为对比，`Vue`模版语法的表现力就差很多。

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

### 受`JS`语法限制的`XML` ###

比如`class`属于`JS`语法`keyword`，而`class`在`HTML`中代表**「类名」**。

所以当`JSX`使用`className`作为**「类名」**的`props`时难免让人困惑。

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

### 依赖编译 ###

`JSX`需要先编译为`JS`才能在宿主环境执行，所以使用`JSX`描述视图的框架（比如`React`）都需要依赖编译工具。

这增加了项目环境配置的复杂度。

## DSL哪家强？ ##

到这里我们可以发现，衡量一门`DSL`（领域相关语言）优劣的标准有三点：

*  是否能直观描述视图状态
 *  是否有灵活的编程能力
 *  原生支持还是需要编译

让我们按这三个维度权衡几种不同平台的`DSL`：

### HTML ###

视图描述能力：????????????

编程能力：????

不需要编译：????

`HTML`描述视图能力最强（因为与`DOM`节点一一对应），但是缺乏编程能力。

### Pug、Vue、JSX ###

视图描述能力：????????????

编程能力：????????~????????????

![ecfb08c520f5be089f9aeace45a751f8.png][]

都是在`XML`基础上演进的语法糖，拥有强大的描述视图能力。

他们的区别在于**「编程能力」**与**「模版语法」**的束缚之间取舍。

### Flutter ###

视图描述能力：????

编程能力：????????????????

使用函数调用的方式描述视图，编程能力很强。

但是在描述嵌套的组件树结构时，函数调用不如`XML`描述能力强。

比如如下`HTML`结构：

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

用`Flutter`语法描述：

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

## SwiftUI与React ##

`SwiftUI`作为被苹果寄予厚望、意图统领`IOS`全平台的`DSL`。

![86995936a5534818aef4ee3db01a6729.png][]

在保证强大的编程能力同时，也希望在视图表现力方面做的更好。

接下来我们通过一个简单的**「点击加一」**的计数器来对比`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>数字：{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("数字: \(counter)")
                Button(action: increment) {
                    Text("点我加一")
                }
            }
        }
    }

可以看到，抛开语法差异，两个框架的写法是很类似的。

同时，`SwiftUI`凭借强大的编程能力，原生实现`React`当前并不支持的功能：

![7d9eaffac0b3bad7c0f7a521e13c1e61.png][]

比如，在`React`中，子组件要改变父组件的状态，需要父组件将**「状态」**与**「改变状态的方法」**传递给子组件。

子组件调用**「改变状态的方法」**通知父组件状态变化，父组件再传递变化后的**「状态」**给子组件。

这种方式在`React`中被称为**「受控组件」**。

在`SwiftUI`中，子组件只需要将父组件传递的状态申明为`@Binding`，就能达到与父组件该状态**「双向绑定」**的效果。

比如上例的`counter`：

// 从
    @State var counter = 0
    // 变为
    @Binding var counter

则计数器接受父组件传递的`counter`状态，子组件`counter`状态改变后会作用于父组件`counter`状态。

## 你更喜欢哪种DSL ##

从2013年5月29日`React`诞生到现在。

经过8年的教育，大部分`React`开发者已经接受`JSX`。

但是，这期间也不断有人提出`JSX`的替代方案。

比如react-hyperscript。

随着`SwiftUI`热度提升，更是有人提出用其替代`React`中的`JSX`：

![bee93541ae203ca4421ff1980518a52c.png][]

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

你喜欢`JSX`么？你觉得未来他会被谁取代？或者他会取代谁？

[5207c6d87ddc8192bf7801cc8b995b06.png]: /images/20221005/ba30c3439f5d4dc9ab01b8e543871b57.png
[ecfb08c520f5be089f9aeace45a751f8.png]: /images/20221005/41717f8bd0504ef98a68c939a94ef284.png
[86995936a5534818aef4ee3db01a6729.png]: /images/20221005/19f4770fd65943b5b82c72740449223c.png
[7d9eaffac0b3bad7c0f7a521e13c1e61.png]: /images/20221005/9cb551f11c274370b6a325e1302d7554.png
[bee93541ae203ca4421ff1980518a52c.png]: /images/20221005/49714a5f5f7b4bdcb0b06800f48f8d80.png