1

给定一个返回元素的函数：

(defn title []
  [:h1 "Hello World"])

将它嵌套在另一个组件中的首选方法是什么？

我已经在教程中看到它通过将函数调用包装在向量中来完成：

[:div {:class "app"}
  [title]]

但这对我来说似乎有点奇怪，因为 的返回值title本身就是一个向量，因此会扩展为[[:h1 "Hello World"]]. 外部向量会发生什么？

它也适用于仅评估内联函数：

[:div {:class "app"}
  (title)]

但我不确定这是否是一个好主意，因为括号和方括号的混合可能很难阅读。

有什么意见吗？

4

1 回答 1

3

这对试剂来说比对打嗝（ish html-generators）更具体——它可能会也可能不会与不同的框架或服务器端的打嗝一起工作。

试剂代替“标签”的功能并将其视为反应组件。注意[title]不是调用函数。它是一个向量，包含对函数的引用。

所以这里的区别在于，您是否希望title被视为一个组件（以及它附带的所有内容（使用 时[title]）），或者如果您只是调用(title)那里，它会将结果放在向量中。

有一个专门的教程页面：

那么，我应该选择哪种 Greet-family 变体（方形 vs 圆形），为什么？

“哪个？”的答案 很简单：您几乎肯定想要方形版本。“为什么？” 需要更多解释...

首先，让我们承认两种变体最终会产生相同的 DOM，因此在这方面它们是相同的。

尽管结果相同，但它们在一个显着方面有所不同：

  1. square 版本会将每个 greet 子组件创建为一个不同的 React 组件，每个组件都有自己的 React 生命周期，允许它们独立于兄弟姐妹重新渲染。
  2. 圆形版本将所有孩子的问候打嗝合并到父母返回的打嗝中，形成一个大数据结构，父母和孩子都在一起。因此，每次父级重新渲染时，所有的问候子级也会有效地重新渲染。然后 React 必须弄清楚这棵树中发生了什么变化。

因此，方形版本在“重新渲染时”会更高效。只有需要重新渲染的 DOM 才会被完成。在本教程中的玩具规模上，这几乎无关紧要，但如果 greet 是一个更重要的子组件，那么这种效率提升可能是显着的。

于 2021-01-21T13:55:39.100 回答