Question

我有很多简单的React功能组件，例如：

const Icon = (p:{icon:string}) => <i className={'fas fas-'+icon}/>
const Foo = () => <div>test1 <p>test2</p></div>
const X = () => (
  <div>
    <Foo />
    <Icon icon='test' />
  </div>
)

在我的代码库中，大多数代码使用memo()或包裹在mobx-react-lite的{{1}}中，而它们本身会添加observer()

大多数人似乎都是这样做的，但是我认为这在大多数情况下要好得多：

memo()

因为我发现创建这些额外的内部DOM节点并为所有生命周期事件等付出代价的理由很少。

可以肯定，const icon = (icon:string) => <i className={'fas fas-'+icon}/> const foo = <div>test1 <p>test2</p></div> const X = () => ( <div> {foo} {icon('test')} </div> ) icon可以帮助：

管理复杂的情况（React.createElement，状态，错误边界等）
提供带有道具的设施
在树中给一个漂亮的名字
...

，但是在大多数情况下，它不是必需的。我到处都可以看到人们创建了比需要更多的节点，然后添加了更多的包装，以使React尽可能少地工作，在此过程中，他们混淆了代码（由于JSX，两次编写了组件名称，添加了无用的功能，语法等）。

在上面的示例中，除了在组件树中更漂亮的名称之外，我没有其他理由，而且我敢肯定，我可以找到一种以便宜的价格提供名称的方法。

在许多情况下，useEffect和A1更简单，更快，更好，更合乎逻辑时，为什么人们总是写B1和A2之类的东西？

B2

生成的代码是：

const A1 = () => <div />
const B1 = () => <div><A1 /></div>

const A2 = <div />
const B2 = <div>{A2}</div>

这是我发现的先前问题，但答案对我来说似乎还不完整。

我想念/不明白的是什么？

<comp>与{Comp（）}或什至{Comp}：为什么没有额外的React内部节点却无所作为？

0 个答案: