Каков предпочтительный синтаксис для вложения элемента сбоя реагента, возвращаемого функцией?

Дана функция для возврата элемента:

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

Каков предпочтительный способ вложения этого внутри другого компонента?

Я видел, как это делается в учебнике, заключая вызов функции в вектор:

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

но мне это показалось немного странным, так как возвращаемое значение title само по себе является вектором и поэтому расширится до [[:h1 "Hello World"]]. Что происходит с внешним вектором?

Он также работает, чтобы просто оценить встроенную функцию:

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

но я не уверен, что это хорошая идея, учитывая сочетание скобок и квадратных скобок, это может быть трудно читать.

Есть мнения?


clojurescript reagent hiccup
person insano10    schedule 21.01.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Это более характерно для реагента, чем для икоты (например, html-генераторов) - он может работать или не работать с разными фреймворками или икотой на стороне сервера.

Реагент берет функцию вместо тега и обрабатывает ее как компонент реакции. Обратите внимание, что [title] не вызывает функцию. Это вектор, который содержит ссылку на функцию.

Таким образом, разница здесь в том, хотите ли вы, чтобы title рассматривался как компонент (со всем, что с ним связано (при использовании [title])) или если вы просто вызываете (title) там, и он помещает результат прямо в вектор.

Этому посвящена целая учебная страница:

Итак, какую вариацию семейства приветствий (квадратную или круглую) выбрать и почему?

Ответ на который? легко: вам почти наверняка нужна квадратная версия. Почему? требует дополнительных пояснений...

Во-первых, давайте признаем, что оба варианта в конечном итоге будут создавать один и тот же DOM, поэтому в этом отношении они одинаковы.

Несмотря на одинаковый результат, они отличаются одним существенным образом:

  1. квадратная версия создаст каждый потомок приветствия как отдельный компонент React, каждый со своим собственным жизненным циклом React, что позволит им повторно отображать независимо от братьев и сестер.
  2. Круглая версия приводит к тому, что икота приветствия для всех дочерних элементов включается в икоту, возвращаемую родителем, образуя одну большую структуру данных, родитель и дочерние элементы вместе. Таким образом, каждый раз, когда родительский элемент перерисовывается, все дочерние элементы приветствия также эффективно перерисовываются. Затем React должен выяснить, что изменилось в этом дереве.

В результате квадратная версия будет более эффективной во время повторного рендеринга. Будет выполнен только тот DOM, который необходимо повторно отобразить. В нашем игрушечном масштабе в этом руководстве это вряд ли имеет значение, но, если бы приветствие было более существенным дочерним компонентом, это увеличение эффективности могло бы быть значительным.

person cfrick    schedule 21.01.2021
comment
Вы также можете добавить ссылку на документацию по реагентам, которая охватывает эту тему и содержит более подробную информацию (cljdoc.org/d/regent/regent/1.0.0/doc/tutorials/) - person Walton Hoops; 22.01.2021