您现在的位置是：亿华云 > 域名

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

亿华云2025-10-02 18:45:36【域名】8人已围观

简介近日，在一场关于JSX的讨论中，React核心成员「Sebastian Markbåge」(Hooks作者)表示：他更推崇SwiftUI语法，并认为JSX就是个错误。JSX最早由Facebook提出并

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

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

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

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

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

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

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

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时难免让人困惑。

依赖编译

JSX需要先编译为JS才能在宿主环境执行，所以使用JSX描述视图的香港云服务器框架(比如React)都需要依赖编译工具。

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

DSL哪家强?

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

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

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

HTML

视图描述能力：🌟🌟🌟

编程能力：🌟

不需要编译：🌟

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

Pug、Vue、JSX

视图描述能力：🌟🌟🌟

编程能力：🌟🌟~🌟🌟🌟

都是在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。服务器租用

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

接下来我们通过一个简单的「点击加一」的计数器来对比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当前并不支持的功能：