What is the difference between "UI tree" and "render tree" in the docs?
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 11.8k
- 派生
- 7.9k
- 平均合并
- 1 天 11 小时
- 30 天内合并 PR
- 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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 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
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 25/100