React Atlas

交互式学习地图

语言基础章节 013 小时基础

值、执行与作用域

JavaScript 核心

建立真正能解释运行结果的语言模型，而不是只记语法。理解值如何流动、函数如何执行、变量如何被捕获。

MENTAL MODEL

先建立心智模型

JavaScript 程序可以看成：值在作用域之间流动，函数把输入映射为输出，闭包让函数携带创建时的环境。React 的组件与 Hook 都建立在这个模型之上。

EXAMPLE.TSX
function createCounter(initial = 0) {
  let count = initial

  return {
    read: () => count,
    increment: () => ++count,
  }
}

const counter = createCounter(2)
counter.increment() // 3
counter.read()      // 3

PRACTICE

动手练习

实现一个 createHistory()：支持 push(value)、undo() 和 current()，内部状态不能被外部直接修改。

先写出状态与数据流，再开始编码。完成后尝试解释：这个方案中唯一事实来源在哪里？