搜索词

jsx , jsxFactory , transformer

建议

允许利用JSX生成过程来控制使用--jsxFactory时的React.createElement输出格式。

• 特定情况(例如#15217,#32619)也从泛型解决方案中受益。*

用例

以thunk形式发出组件子元素

对于通过JSX组件层次结构附加依赖跟踪的响应式框架很有用。
内部createJsxFactoryExpression()调用的LHS使用--jsxFactory编译器选项进行控制：

// jsx
<div>
  <div>a</div>
  <div>b</div>
</div>

// current emit (jsxFactory: "h")
h('div', null, 
  h('div', null, 'a'), 
  h('div', null, 'b')
)

这会产生一个嵌套的React.createElement()/h()链，该链会立即求值。
使用(仍然同步)thunks,框架可以在遍历树时跟踪每个组件依赖项，以进行细粒度的更改检测：

// thunks (needs transformer)
h('div', null, () => [
  h('div', null, () => ['a']), 
  h('div', null, () => ['b'])
])

这需要递归地将JSX发射转换为接受一些参数作为thunk的h()签名。
我为此编写了一个hacky(#16607)转换器，但不得不从TypeScript编译器中提取大部分与JSX相关的内部内容，而对createExpressionForJsxElement()的更改是微不足道的：

const cs = argumentsList.slice(2);
const argThunk = ts.createArrowFunction(
    [],
    [],
    [],
    undefined,
    undefined,
    ts.createArrayLiteral(cs)
);
const thunkified = [...argumentsList.slice(0, 2), argThunk];

根据#34547,已经在进行计划，将嵌套组件参数作为数组而不是可变参数传递。指定jsxFactory意味着我们假设控制组合行为；我们还应该控制函数签名。