反応を使用するほとんどの人はjsxを使用していると 確信しています。 簡潔な構文のおかげで、 jsxはテンプレートの可読性を改善します。 比較する：
render() { return React.createElement('div', { className: 'block'}, 'Text of block'); }
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メソッドが非常に重いためです。
使用して、バグを通知してください。 ご清聴ありがとうございました。