jsxなしで行うことは可能ですか？なぜですか？

反応を使用するほとんどの人はjsxを使用していると 確信しています。 簡潔な構文のおかげで、 jsxはテンプレートの可読性を改善します。 比較する：

render() { return React.createElement('div', { className: 'block'}, 'Text of block'); } // vs render() { return <div className='block'> Text of block </div>; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目のオプションは、このような単純な例でも、より明確に見えます。 例が複雑な場合、違いはさらに明白になります。

悪いjsxとは

jsxが標準のjavascript機能である場合はすべてうまくいきますが、そうではありません。 jsxを使用するには、トランスパイラーが必要です。 jsxを使用することに決めたので、あなたは永遠にトランスピレーションに依存するようになるでしょう。 最近まで、ecmascript 2015の新機能を使用するにはトランスパイラーが必要なので、そのような依存関係は誰も怖がりませんでした。 しかし、すべてが変わり、es6サポートレベルは100％に近い

少なくとも開発環境では、トランスピレーションを取り除くことはすでに可能です。 これがどんな機会を開くか想像できますか？ デバッグするときは、大幅に変更されたbabel出力を確認する必要はありません。ソースマップは必要ありません。ファイルを変更した後、再構築が完了するまで待つ必要はありません。 そして、この場合のjsxが主な障害になります... jsxに代わるものはありますか？

Jsxの代替

ecmascript 2015標準では、 タグ付きテンプレート文字列が定義されています 。 上記の例を次のように書き換えることができます。

 render() { return es6x `<div className='block'> Text of block </div>`; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

より複雑な例：

 import Input from './input'; render() { return <div className='block'> <Input name='name1' value={this.props.value} {...this.props.inputProps} checked /> {this.props.items.map(item => <span {...item.props}>{item.text}</span>} </div>; } //  : render() { return es6x `<div className='block'> <${Input} name='name1' value=${this.props.value} ${this.props.inputProps} checked /> ${this.props.items.map(item => es6x `<span ${item.props}>${item.text}</span>`)} </div>`; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

接続方法

 npm install --save es6x
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6xパッケージはさまざまなエンジンをサポートしています。 それらの中には、 react 、 hyperscript （h）、および（デフォルトで）json形式のユニバーサル出力があります：

 { tag: 'div', attrs: { className: 'block' }, children: ['Text of block'] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

reactと一緒に使用するには、最初の呼び出しの前に（プロジェクト内の1つの場所で）出力メソッドを指定する必要があります。

 import React from 'react'; import es6x from 'es6x'; es6x.setOutputMethod(React.createElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

es6xパッケージの機能

• 約2 kbの圧縮サイズ
• テンプレートはキャッシュされます-最初の実行時に、繰り返される呼び出しに使用されるキャッシュが作成されます
• jsxが受けるパターン内の空白の問題を解決しました。

 return <div> {'some text'} {' '} <b>strong</b> {' '} <i>emphase</i> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の例では、 jsxで、単語 "text"、 "strong"、および " emphase "の間にいkostruktiya {''}を追加する必要があり、 es6xではこれは不要です。

 return es6x `<div> ${'some text'} <b>strong</b> <i>emphase</i> </div>`;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

性能

es6xはキャッシュをサポートしているため、同じテンプレートを再度呼び出しても解析は行われず、呼び出しははるかに高速です。 テスト結果による呼び出しは、最初の呼び出しよりも10倍高速です（jsonでのユニバーサル解析の場合、reactの解析の場合、差は2倍未満）。 また、 reactの解析時に競合するt7パッケージと比較しました。 結果：

jsx出力：15683 ops /秒±1％

es6x：11187 ops /秒±1％

t7：10253 ops / sec±1％（多くのjsxパンはサポートしていません）

つまり、パフォーマンスが約30％低下します。 予想よりも少ないことが判明しました。 その理由は、createElementメソッドが非常に重いためです。

使用して、バグを通知してください。 ご清聴ありがとうございました。