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

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

目前创新互联已为超过千家的企业提供了网站建设、域名、网络空间、网站托管、服务器租用、企业网站设计、施甸网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

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

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

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

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.   i am Ka Song 
    3.
 

 JS在运行时的灵活

曾有人说：

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

 
 
 
 
      
  
  
  
  1. function App({children}) { 
    2.   
  
  
  
  2.   return ( 
    3.   
  
  
  
  3.     
     
    4.   
  
  
  
  4.       {children || 'i am empty'} 
    5.   
  
  
  
  5.     
 
  •   ) 
  • } 

    •  作为对比，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结构：

      
 
 
 
         
  
  
  
    1.  
      2.    
  
  
  
    2.   
      Hello
       
      3.    
  
  
  
    3.   
      I am
       
      4.    
  
  
  
    4.   
      Ka Song
       
      5.    
  
  
  
    5.  
      6.

     用Flutter语法描述：

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

    SwiftUI与React

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

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

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

    React使用class语法：

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

     SwiftUI：

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

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

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

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

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

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

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

    比如上例的counter：

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

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

    你更喜欢哪种DSL

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

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

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

    比如react-hyperscript。

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

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

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

    本文名称：React核心成员表示：JSX就是个错误
    文章网址：http://www.gawzjz.com/qtweb/news31/205731.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站策划知识

    同城分类信息

    蓬溪网站建设　　 　成都小程序　　 　四川晃众门窗　　 　重庆联通机房托管　　 　网站制作公司　　 　微博营销　　 　泸州洋跃建站　　 　四川平武网站建设　　 　虚拟主机购买　　 　网站建设　　 　成都棕数机房　　 　彭州网站建设　　 　成都广告制作　　 　康明斯发电机　　 　成都SEO优化　　 　云主机　　 　重庆电信回兴机房　　 　娄底尾呼妄服装　　 　红光高低压开关厂　　 　成都免费建站