React核心成员说：JSX是一个错误
时间：2023-03-19 17:24:01
科技观察
最近，在一个关于JSX的讨论中，React核心成员“SebastianMarkb?ge”（Hooks的作者）说：他更欣赏SwiftUI语法，认为JSX是一个错误。JSX最早由Facebook提出并推广，在React中广泛用于描述视图状态。JSX作为类XML的JS语法糖，同时兼顾了两个优势：XML对树形结构的出色表现力，无论是“嵌套”还是“属性”，JSX都能自然地描述。我们可以很容易的从下面的JSX结构中推导出实际的view效果：:JSX是具有超能力的HTML。这里的超能力是指：JSX作为JS语法糖，可以灵活的使用JS语法来描述视图状态。functionApp({children}){return(
{children||'iamempty'}
)}作为比较，Vue模板语法的表现力要差得多。但是，我的宝贝和砒霜一样：受JS语法限制的XML，比如class，属于JS语法关键字，class在HTML中代表“类名”。所以当JSX使用className作为“类名”的props时，难免让人感到困惑。
依赖编译JSX需要编译成JS才能在宿主环境中执行，所以使用JSX描述视图的框架（如React）需要依赖编译工具.这增加了项目环境配置的复杂性。哪种DSL更好？这里我们可以发现，衡量一个DSL（DomainRelatedLanguage）优劣的标准有3个：是否能直观地描述视图状态，是否具有灵活的编程能力，是否原生支持或是否需要编译。让我们按照这三个维度权衡几种不同平台的DSL：HTML视图描述能力：🌟🌟🌟编程能力：🌟DOM节点一一对应），但缺乏编程能力。Pug、Vue、JSX视图描述能力：🌟🌟🌟编程能力：🌟🌟~🌟🌟🌟基于XMLEvolved语法糖，具有强大的视图描述能力。它们的区别在于“编程能力”和“模板语法”约束之间的权衡。Flutter视图描述能力：🌟编程能力：🌟🌟🌟🌟使用函数调用来描述视图，编程能力很强。但在描述嵌套组件树结构时，函数调用不如XML描述强大。例如下面的HTML结构：
在Flutter语法中描述为：Stack(children:
[Text("Hello"),Text("Iam"),Text("KaSong")],)SwiftUI和ReactSwiftUI是Apple寄予厚望并打算称霸整个IOS平台的DSL。在保证强大的编程能力的同时，我们也希望在视图表达能力上做得更好。接下来，我们通过一个简单的“点击加一”计数器来比较React和SwiftUI语法：React使用类语法：classCounterextendsReact.Component{state={counter:0}increment:()=>{const{counter}=this.state;this.setState({counter:counter+1})}render(){const{counter}=this.state;return(<>Number:{counter}
点我添加一个/>)}}SwiftUI:structCounter:View{@Statevarcounter=0funcincrement(){counter+=1}varbody:someView{VStack{Text("Number:\(counter)")Button(action:increment){Text("Clickmetoaddone")}}}}可以看到，除了语法上的差异，两个框架的写法非常相似。同时，SwiftUI凭借其强大的编程能力，原生实现了React目前不支持的功能：比如在React中，子组件想要改变父组件的状态，父组件需要通过“状态”和“改变状态的方法”到子组件。子组件调用“状态改变方法”通知父组件状态改变，父组件再将改变后的“状态”传递给子组件。这种方式在React中被称为“受控组件”。在SwiftUI中，子组件只需要将父组件传递过来的state声明为@Binding即可实现与父组件状态“双向绑定”的效果。比如上面例子中的counter：//从@Statevarcounter=0//变成了@Bindingvarcounter，那么counter接受的是父组件传过来的counter状态，子组件的counter状态会影响counter状态计数器状态更改后的父组件。从2013年5月29日React诞生到现在，你更喜欢哪种DSL。经过8年的教育，大多数React开发人员已经接受了JSX。然而，在此期间不断提出JSX的替代方案。比如react-hyperscript。随着SwiftUI越来越受欢迎，甚至有人提出用它来代替React中的JSX：有人还做了一个模型experimental-react-like-framework。你喜欢JSX吗？你认为他未来会被谁取代？或者他会取代谁？
