はJSXは、文字列/ wのATTRS対

Question

docsは私が唯一の使用中括弧を言った何かを読んで思った

<Thing attr='val' /> === <Thing attr={'val'} />

... JSXは文字列で属性を括弧付き属性と同じであると言うブレース/リアクト文字列の方がパフォーマンスが良いので必要なときに参照を見つけることができません。中括弧の評価コストはありますか？

Answer 1

https://github.com/jsx/JSX/tree/master/srcはかっこ

はい、あなただけ割り当てたい場合は、それが実行されますので、{}内部の何かが、JavaScriptコードとみなされます見ることができるようにするための評価コストがあります文字列その後、 単にattr='val'ではなくattr={'val'}

を使用していますがベースの割り当て条件を持っているならば、あなたはattr={'val'}

を使用することができます

attr={ (condition) ? 'val1' : 'val2'} 

のように私は、これはあなたの思考がクリアされます、願っています。詳細については

---

：

https://reactjs.org/docs/jsx-in-depth.html

ここでは、文字列の補間や速度性能の舞台裏読み取ることができます。

https://koukia.ca/string-interpolation-vs-string-format-string-concat-and-string-builder-performance-benchmarks-c1dad38032a

Answer 2

JSXは実際にJSオブジェクトと解析しているため、パーサーの文字列作成オーバーヘッドまたはコンポーネントの文字列作成オーバーヘッドのいずれかです。それはいずれの方法も簡単です。しかし、文字列リテラルでは、コード内で視覚的にノイズが多いだけです。 valが変数または式の場合は、実際に目的を果たすだけです。

しかし、新しい補間された文字列によって使用されるようなテンプレートエンジンでは、パフォーマンスが低下します。例：

遅く、まだ単なるプレーン・リテラルよりべきである

`It is a dog` 

：

`It is a ${'cat'}` 

がより遅くなり

'It is a dog' 

私は読者の練習としてそれを残しておきますJSXエンジンで補間部品を見つける。 ;）

Answer 3

なしなしパフォーマンスの違いはありません。

<div first="abc" second={"def"}/> 

// Compiles to: 
React.createElement("div", { first: "abc", second: "def" }); 

各スタイルで生成されたコードを見てください。ただし、不要な中かっこは避けてください。