React Learning Notes

Appearance

将UI视为树 ​

🔍 树的概念在UI中的应用 ​

🧩 什么是UI树？ ​

  • 🌲 树结构建模：React和许多其他UI库都将用户界面建模为树状结构
  • 🧠 概念重要性：理解树结构有助于掌握组件关系、调试性能和管理状态
  • 🔄 通用模式：浏览器DOM、CSS、移动平台视图层次都使用树结构

🌿 React中的两种核心树 ​

1️⃣ 渲染树 (Render Tree) ​

  • 📊 组件嵌套关系：表示组件之间的父子嵌套结构
  • 🔄 实时变化：可能随着条件渲染在不同渲染过程中发生变化
  • 🧐 帮助识别：
    • 🏛️ 顶层组件：距根组件最近的组件，影响下方所有组件的渲染性能
    • 🍃 叶子组件：树底部没有子组件的组件，通常会频繁重新渲染
jsx
// 组件树示例
function App() {
  return (
    <>
      <Header />
      <MainContent>
        <Sidebar />
        <ArticleList>
          <Article />
          <Article />
        </ArticleList>
      </MainContent>
      <Footer />
    </>
  );
}

2️⃣ 模块依赖树 (Module Dependency Tree) ​

  • 📦 代码组织关系：表示应用程序中模块之间的导入/依赖关系
  • 🔗 文件连接：每个节点是一个模块，每个分支代表import语句
  • 🛠️ 构建工具使用：bundler用它来确定应包含哪些模块，优化包大小
jsx
// App.js
import Header from './Header';
import MainContent from './MainContent';
import Footer from './Footer';

// MainContent.js
import Sidebar from './Sidebar';
import ArticleList from './ArticleList';

🔎 渲染树 vs 模块依赖树 ​

🧐 主要区别 ​

  • 📌 节点内容：
    • 渲染树的节点是组件实例
    • 依赖树的节点是模块文件
  • 📄 非组件模块：
    • 渲染树只包含组件
    • 依赖树包含所有模块（包括工具、常量、数据等）
  • 🔄 动态 vs 静态：
    • 渲染树可能随着渲染变化（条件渲染）
    • 依赖树在构建时相对固定
jsx
// 渲染树节点示例
<Header userLoggedIn={true} />

// 模块依赖树节点示例
import Header from './Header';
import { getUser } from './userUtils';

💡 渲染树的应用 ​

🛠️ 性能优化与调试 ​

  • 🔍 确定重渲染来源：识别哪些顶层组件触发了大范围重渲染
  • 🔄 理解状态更新影响：跟踪状态变化如何传播到子组件
  • 🧠 理解组件设计：优化组件结构和层次，减少不必要的嵌套

🎯 React开发中的应用 ​

  • 📊 合理分割组件：避免过度嵌套或过于扁平的组件结构
  • 🧩 组件复用：识别可重用组件，提高代码复用率
  • 🔄 状态放置：确定状态应该放在树的哪个层级

🔌 模块依赖树的应用 ​

📦 构建优化 ​

  • 🔍 识别大型依赖：发现过大的依赖模块，优化导入
  • 🧹 删除未使用代码：帮助工具进行tree-shaking，移除无用代码
  • 🔄 代码分割：决定如何分割代码，实现按需加载

💼 项目组织 ​

  • 📂 合理组织文件：根据依赖关系优化项目结构
  • 🔄 避免循环依赖：识别并修复可能导致问题的循环引用
  • 🧠 理解代码流：掌握数据和逻辑在应用程序中的流动方向

🚀 实际应用案例 ​

🔍 优化渲染性能 ​

jsx
// 优化前：顶层组件频繁重渲染，导致整个树重渲染
function Dashboard({ user, posts, weather }) {
  const [searchTerm, setSearchTerm] = useState('');
  // 每次搜索都导致整个Dashboard重渲染
  return (
    <div>
      <SearchBar term={searchTerm} onChange={setSearchTerm} />
      <UserProfile user={user} />
      <PostList posts={posts} searchTerm={searchTerm} />
      <WeatherWidget data={weather} />
    </div>
  );
}

// 优化后：将搜索状态下移，减少不必要的重渲染
function Dashboard({ user, posts, weather }) {
  return (
    <div>
      <PostListWithSearch posts={posts} />
      <UserProfile user={user} />
      <WeatherWidget data={weather} />
    </div>
  );
}

📦 优化依赖大小 ​

jsx
// 优化前：导入整个库
import { formatDate, formatCurrency, formatNumber } from 'huge-format-library';

// 优化后：只导入需要的函数
import formatDate from 'huge-format-library/formatDate';

📝 总结 ​

  • 🌳 UI树模型：React使用树结构表示组件层次和模块依赖关系
  • 🌿 两种核心树：
    • 渲染树：组件嵌套结构，帮助理解UI渲染流程
    • 模块依赖树：模块导入关系，帮助优化构建过程
  • 🔍 渲染树应用：优化组件结构、调试性能问题、合理设计组件层次
  • 📦 依赖树应用：优化包大小、组织代码结构、实现代码分割
  • 🧠 设计指导：理解这两种树可以帮助开发者设计更高效的React应用程序

参考：React官方文档-将UI视为树