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

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

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

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

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

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

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

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

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

 
 
 
 
  1.  
  2.   i am Ka Song 
 

 JS在运行时的灵活

曾有人说:

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

 
 
 
 
  1. function App({children}) { 
  2.   return ( 
  3.     
     
  4.       {children || 'i am empty'} 
  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.   

      Hello

       
    3.   

      I am

       
    4.   

      Ka Song

       
    5.  

     用Flutter语法描述:

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

    SwiftUI与React

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

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

    接下来我们通过一个简单的「点击加一」的计数器来对比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.         

      数字:{counter}

       
    14.         点我加一 
    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中,子组件要改变父组件的状态,需要父组件将「状态」与「改变状态的方法」传递给子组件。

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

    这种方式在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:

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

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

    当前标题:React核心成员表示:JSX就是个错误
    文章网址:http://www.shufengxianlan.com/qtweb/news31/205731.html

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

    广告

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

    猜你还喜欢下面的内容

    域名注册知识

    分类信息网