1
// 这段代码会导致多少次重排？
2
const container = document.getElementById("container");
3

4
for (let i = 0; i < 100; i++) {
5
  const div = document.createElement("div");
6
  div.textContent = `Item ${i}`;
7
  div.style.height = "50px"; // 触发样式计算
8
  container.appendChild(div); // 触发布局
9
  console.log(container.offsetHeight); // 强制同步布局！
10
}

1
// 性能灾难：读写交替
2
const elements = document.querySelectorAll(".item");
3
elements.forEach(el => {
4
  el.style.width = "100px"; // 写
5
  console.log(el.offsetWidth); // 读 - 强制布局！
6
});
7

8
// 优化方式：批量读写分离
9
const elements = document.querySelectorAll(".item");
10
const widths = [];
11

12
// 先读
13
elements.forEach(el => widths.push(el.offsetWidth));
14

15
// 再写
16
elements.forEach((el, i) => {
17
  el.style.width = widths[i] + 10 + "px";
18
});

1
// jQuery 时代的典型代码
2
function updateTodoList(todos) {
3
  // 手动管理 DOM 更新
4
  const $list = $("#todo-list");
5
  $list.empty(); // 清空
6

7
  todos.forEach(todo => {
8
    const $item = $("<li>").text(todo.text);
9

10
    if (todo.completed) {
11
      $item.addClass("completed");
12
    }
13

14
    $item.appendTo($list);
15
  });
16

17
  // 更新计数器
18
  const completedCount = todos.filter(t => t.completed).length;
19
  $("#completed-count").text(completedCount);
20

21
  // 更新状态文本
22
  if (todos.length === 0) {
23
    $("#empty-state").show();
24
  } else {
25
    $("#empty-state").hide();
26
  }
27
}

1
// React 的声明式写法
2
function TodoList({ todos }) {
3
  const completedCount = todos.filter(t => t.completed).length;
4

5
  return (
6
    <div>
7
      <ul>
8
        {todos.map(todo => (
9
          <li key={todo.id} className={todo.completed ? "completed" : ""}>
10
            {todo.text}
11
          </li>
12
        ))}
13
      </ul>
14

15
      <p>已完成: {completedCount}</p>
16

17
      {todos.length === 0 && <p>暂无待办事项</p>}
18
    </div>
19
  );
20
}
21

22
// 只需要告诉 React "渲染成什么样"
23
// 不需要关心 "怎么更新"

1
// JSX 转译后的真实代码
2
const element = React.createElement(
3
  "div",
4
  { className: "container" },
5
  React.createElement("span", null, "Hello")
6
);
7

8
// 虚拟 DOM 对象结构
9
{
10
  $$typeof: Symbol(react.element),
11
  type: "div",
12
  key: null,
13
  ref: null,
14
  props: {
15
    className: "container",
16
    children: {
17
      type: "span",
18
      props: {
19
        children: "Hello"
20
      }
21
    }
22
  }
23
}

1
// 同层比较的实现逻辑
2
function reconcileChildren(oldFiber, newElements) {
3
  let index = 0;
4
  let oldFiber = oldFiber;
5
  let prevSibling = null;
6

7
  while (index < newElements.length || oldFiber != null) {
8
    const newElement = newElements[index];
9
    const newFiber = updateSlot(oldFiber, newElement);
10

11
    // 同一位置比较，不跨层级
12
    if (oldFiber) {
13
      oldFiber = oldFiber.sibling;
14
    }
15

16
    index++;
17
  }
18
}

1
// 无 key：低效更新
2
<ul>
3
  {items.map((item) => (
4
    <li>{item.text}</li>
5
  ))}
6
</ul>
7

8
// 有 key：高效移动
9
<ul>
10
  {items.map((item) => (
11
    <li key={item.id}>{item.text}</li>
12
  ))}
13
</ul>

1
class Counter extends React.Component {
2
  state = { count: 0 };
3

4
  handleClick = () => {
5
    // 这三次 setState 会合并
6
    this.setState({ count: this.state.count + 1 });
7
    this.setState({ count: this.state.count + 1 });
8
    this.setState({ count: this.state.count + 1 });
9

10
    // 此时 state.count 仍然是 0！
11
    console.log(this.state.count); // 0
12

13
    // 在 React 18 的 automatic batching 中
14
    // 即使在 setTimeout/Promise 中也会批量更新
15
  };
16
}

1
// 使用 useTransition 标记低优先级更新
2
function SearchResults() {
3
  const [query, setQuery] = useState("");
4
  const [results, setResults] = useState([]);
5
  const [isPending, startTransition] = useTransition();
6

7
  const handleChange = e => {
8
    // 高优先级：立即更新输入框
9
    setQuery(e.target.value);
10

11
    // 低优先级：可以延迟的搜索结果更新
12
    startTransition(() => {
13
      setResults(search(e.target.value));
14
    });
15
  };
16

17
  return (
18
    <div>
19
      <input value={query} onChange={handleChange} />
20
      {isPending && <Spinner />}
21
      <Results data={results} />
22
    </div>
23
  );
24
}

1
// 性能敏感场景：虚拟 DOM 的开销可能成为瓶颈
2
function LargeList({ items }) {
3
  // 每帧都创建大量虚拟 DOM 节点
4
  return (
5
    <div>
6
      {items.map((item, i) => (
7
        // 10000+ 个组件实例
8
        <ComplexItem key={i} data={item} />
9
      ))}
10
    </div>
11
  );
12
}
13

14
// 优化方案：使用虚拟列表
15
import { FixedSizeList } from "react-window";
16

17
function OptimizedList({ items }) {
18
  return (
19
    <FixedSizeList height={600} itemCount={items.length} itemSize={50}>
20
      {({ index, style }) => (
21
        <div style={style}>
22
          <ComplexItem data={items[index]} />
23
        </div>
24
      )}
25
    </FixedSizeList>
26
  );
27
}

1
<!-- Svelte 源代码 -->
2
<script>
3
  let count = 0;
4
  function increment() {
5
    count += 1;
6
  }
7
</script>
8

9
<button on:click={increment}>
10
  Count: {count}
11
</button>

1
// Svelte 生成的更新函数
2
function update(changed, ctx) {
3
  if (changed.count) {
4
    text_node.data = "Count: " + ctx.count;
5
  }
6
}

1
// React 15 的递归更新（简化）
2
function reconcile(parent, oldNode, newNode) {
3
  // 递归遍历，无法中断
4
  if (oldNode.type !== newNode.type) {
5
    // 创建新节点...
6
  }
7

8
  // 递归处理子节点
9
  for (let i = 0; i < newNode.children.length; i++) {
10
    reconcile(parent, oldNode.children[i], newNode.children[i]);
11
  }
12

13
  // 整个过程是同步的
14
}

1
// Fiber 节点结构（简化）
2
const fiber = {
3
  type: "div", // 元素类型
4
  key: null, // 标识
5
  props: { className: "container" }, // 属性
6

7
  // 树结构
8
  return: parentFiber, // 父节点
9
  child: firstChildFiber, // 第一个子节点
10
  sibling: nextSiblingFiber, // 下一个兄弟
11

12
  // 状态
13
  alternate: oldFiber, // 上一次的 Fiber
14
  effectTag: "UPDATE", // 副作用标记
15

16
  // 优先级
17
  lanes: priority, // 更新优先级
18
};

1
// 同一套 React 代码
2
function App() {
3
  return (
4
    <View style={styles.container}>
5
      <Text>Hello, World!</Text>
6
      <Button title="Click me" onPress={handlePress} />
7
    </View>
8
  );
9
}
10

11
// Web 平台：渲染为 <div>, <span>, <button>
12
// iOS 平台：渲染为 UIView, UILabel, UIButton
13
// Android 平台：渲染为 ViewGroup, TextView, Button

1
// 命令式（jQuery）
2
function updateUI(user) {
3
  if (user.isLoggedIn) {
4
    $("#login-form").hide();
5
    $("#user-profile").show();
6
    $("#user-name").text(user.name);
7
    if (user.isAdmin) {
8
      $("#admin-panel").show();
9
    } else {
10
      $("#admin-panel").hide();
11
    }
12
  } else {
13
    $("#login-form").show();
14
    $("#user-profile").hide();
15
    $("#admin-panel").hide();
16
  }
17
}

1
// 声明式（React）
2
function UserProfile({ user }) {
3
  if (!user.isLoggedIn) {
4
    return <LoginForm />;
5
  }
6

7
  return (
8
    <div>
9
      <Profile name={user.name} />
10
      {user.isAdmin && <AdminPanel />}
11
    </div>
12
  );
13
}

1
// React 组件测试：纯函数般简单
2
test("UserProfile shows admin panel for admin user", () => {
3
  const user = { isLoggedIn: true, name: "Admin", isAdmin: true };
4

5
  render(<UserProfile user={user} />);
6

7
  expect(screen.getByText("Admin")).toBeInTheDocument();
8
  expect(
9
    screen.getByRole("region", { name: "Admin Panel" })
10
  ).toBeInTheDocument();
11
});