夜曲
想听 1
UI = f(state)，状态变了卡片才变。
工程与栈 · Web 技术
ReactReact
React 把界面写成状态的函数：你改 state，它重画。手改 DOM 上的字不算数，下一轮会被盖回去。
先认出这张唱片卡，再决定数字听谁的
下面就是夜曲卡片：默认想听是 1，由状态画出来。直接改数字，被盖回去也写在同一张卡上。
state · 想听 1：数字长在唱片卡上。
原因：setLiked 之后 React 按新状态重画卡片。下一步：点「直接改数字」，看下一轮渲染会不会盖回去。
知识点：界面是状态的函数
卡上的数字已经演示了重画，这里只命名四条。
- 你描述 UI，不亲手改 DOM 节点。
- 状态一变，React 按新状态重画该重画的部分。
- 手改屏幕上的字不算数，下一轮渲染会盖回去。
- 离开后要盯：数字、选中、错误都放进 state，不要 querySelector 改字。
什么时候用、怎么用
界面随数据变、要拆成组件时用 React；一次改一个静态标签用不到它。
- 信号：点击后数字、列表、错误提示要跟着变。
- 适用：把变化写成 state，让卡片重画。
- 不适用：为了改一行字去操作 DOM——那会和状态打架。
- 最短路径：定 state → 按 state 画 → 用事件只改 state。
正反例：同一张想听数
目标都是让数字变成 1，只改谁说了算。
数字稳定是 1。结果长在卡上。
下一轮被盖回状态。失败写在物件上。
快速自测
点了「想听」数字却跳回旧值，最可能是什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。