JSX Runtime
React v17で入った
JSXを書いている利用者は特に意識することはない
React本家のblog
参考
>#WIP
従来
tsimport React from 'react';
function App() {
return <h1>Hello World</h1>;
}従来
tsimport React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}Reactのimportが必要
今後
tsimport {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}JSXからJSに変換する結果が変わった
どういうモチベーション ref
内部でのパフォーマンスの最適化をしやすくなる
React v0.12時代にReact.createElementが追加された
当時はclassでcomponentを書くのが普通だったので、それに適していた
しかし、functional componentには適していない
React.createElement は、JSXの実装として意図したものではなく、当時のツールでできる最善のものだったJSXが糖衣構文であることに留意する
React.createElementは自分で書くことも意図されていた
jsxではなく、素のreactを書く、みたいな言い方がされていたと思う
パフォーマンスの最適化がやりづらい
childrenの扱いが、transpile時に決定できるのにruntime時にやってて効率が悪い
buid sizeが少し小さくなる
明示的にReactをimportしないでいい
これはuserが書いているtranspile前のコードの話をしている
typescriptを使っている時
tsconfigのjsxの設定をprod/devで切り替える必要がある