reactjs / reactjs/react.dev

What is the difference between "UI tree" and "render tree" in the docs?

オープン
#6,386 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
JavaScript
スター
11.8k
フォーク
7.9k
平均マージ
1日 11時間
マージ済み PR(30日)
11

説明

Recently an article called "Your UI as a Tree" has been added, introducing a new concept called "render tree". However, the React docs have been using a similar term, "UI tree", such as in the article "Preserving and Resetting State" and "Passing Data Deeply with Context" where this term appears many times.

Are these exactly the same concept? Or are they different? Initially, I thought that they were the same concept, at least in the context of how React and ReactDOM work. But could they actually be different?

My current understanding is as follows:

  • JSX tree: The nested JSX tag hierarchy that developers can return from a component.
  • Render tree: The component hierarchy in a single pass of React rendering. This concept exists in the core React code, not ReactDOM. A new one is created for each render pass.
  • DOM tree: The tree of browser DOM elements you can traverse with querySelectorAll(), etc.. Changes over time as a result of the commit.
  • UI tree: ???

The question here is, "Is a render tree immutable?" According to "Your UI as a Tree", a render tree is an immutable data structure corresponding to a single render pass, like a snapshot of a specific render, traditionally referred to as "virtual DOM" or "(UI) description":

  • A render tree represents a single render pass of a React application.
  • Although render trees may differ across render passes, ...

It also equates the render tree and the UI tree:

  • React creates a UI tree from your components.
  • React creates a render tree, a UI tree, composed of the rendered components.

On the other hand, in "Preserving and Resetting State", it says, "React removed the Counter from the UI tree and destroyed its state". This seems to indicate that the UI tree is mutable, hence different from the render tree.

After reviewing the usage of "UI tree" throughout the documentation, my tentative conclusion is that "UI tree" has now become an ambiguous concept that may refer to either a render tree or a DOM tree depending on the context. Now that "render tree" is introduced and clearly defined, the term "UI tree" might be retired from most part of the documentation for the sake of consistency. What do you think?

I understand that such discussions are usually not much of an issue, but I don't want to see the problem of the legacy docs again, where consistency was lost as new articles were added. Once there's some consensus, I would like to create a PR to maintain consistency.

/CC @lunaleaps

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

“Your UI as a Tree”、“Preserving and Resetting State”、“Passing Data Deeply with Context”における用語と例を比較し、「UI tree」と「render tree」の文書化された使用例も含めます。まず、これらの用語を区別すべきか統合すべきかについて合意を形成します。完了の条件は、後続のドキュメントPRの指針となる、合意された用語の決定ができていることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
documentation
issue の種類
ドキュメント
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。