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

时间:2022-04-26 02:13:13

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

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

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

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

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

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

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

 

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

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

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

 JS在运行时的灵活

 

曾有人说:

  • JSX就是拥有超能力的HTML

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

  1. function App({children}) { 
  2.   return ( 
  3.     <div> 
  4.       {children || 'i am empty'
  5.     </div> 
  6.   ) 

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

然而,吾之蜜糖彼之砒霜:

受JS语法限制的XML

 

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

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

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

 依赖编译

 

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

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

DSL哪家强?

 

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

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

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

HTML

 

视图描述能力:三星

编程能力:一星

不需要编译:一星

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

Pug、Vue、JSX

 

视图描述能力:三星

编程能力:二到三星

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

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

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

Flutter

 

视图描述能力:一星

编程能力:四星

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

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

比如如下HTML结构:

  1. <div> 
  2.   <p>Hello</p> 
  3.   <p>I am</p> 
  4.   <p>Ka Song</p> 
  5. </div> 

用Flutter语法描述:

  1. Stack( 
  2.   children: <Widget>[ 
  3.      Text("Hello"), 
  4.      Text("I am"), 
  5.      Text("Ka Song"
  6.    ], 

SwiftUI与React

 

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

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

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

接下来我们通过一个简单的「点击加一」的计数器来对比React与SwiftUI语法:

React使用class语法:

  1. class Counter extends React.Component { 
  2.   state = { 
  3.     counter: 0 
  4.   } 
  5.   increment: () => { 
  6.     const {counter} = this.state; 
  7.     this.setState({counter: counter + 1}) 
  8.   } 
  9.   render() { 
  10.     const {counter} = this.state; 
  11.     return ( 
  12.       <> 
  13.         <p>数字:{counter}</p> 
  14.         <button onClick={this.increment}>点我加一</button> 
  15.       </> 
  16.     ) 
  17.   } 

SwiftUI:

  1. struct Counter : View { 
  2.     @State var counter = 0 
  3.  
  4.     func increment () { 
  5.         counter += 1 
  6.     } 
  7.  
  8.     var body: some View { 
  9.         VStack { 
  10.             Text("数字: \(counter)"
  11.             Button(action: increment) { 
  12.                 Text("点我加一"
  13.             } 
  14.         } 
  15.     } 

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

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

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

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

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

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

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

比如上例的counter:

  1. // 从 
  2. @State var counter = 0 
  3. // 变为 
  4. @Binding var counter 

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

你更喜欢哪种DSL

 

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

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

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

比如react-hyperscript。

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

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

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

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

【编辑推荐】https://mp.weixin.qq.com/s/d73RPACWTGceWUXJuQe0RA