切换·Esc 返回

React

界面工具
React 是把页面拆成可复用组件、并随状态变化更新界面的 JavaScript 库例如,点击加号更新计数后,读取该数值的组件会重新显示。先判断哪个值变了、哪块界面在读它;简单且不持续变化的页面未必需要 React。
先知道
也常被叫作React.js
开始前

知道按钮上的数字会随点击增加。

看完后

能说出 React 中一次点击怎样改变当前数值,并让相关界面重新显示。

点加号后,为什么只更新这块?
Counter.jsx
1const [count, setCount] = useState(0)
2<button onClick={() => setCount(count + 1)}>
3 已加入 {count} 件
4</button>
localhost:3000
帆布包¥ 79
状态里的 count 现在是 0

按钮读着 count;count 改了,React 就把这块按钮文字换成新值。

刚才发生了什么
  1. 1
    组件是一小块界面

    按钮可以是一块独立的界面,旁边的待办列表也可以是另一块。

  2. 2
    状态记住当前值

    点击把计数从 0 改成 1;状态就是这块界面此刻要显示的值。

  3. 3
    React 按新值显示

    React 用新的数值重新生成相关界面,所以按钮文字变了。

你现在这样判断就够了

先判断“哪个值变了、哪块界面读它”;页面很简单且没有持续变化时,不必急着上 React。

接下来学什么
延伸阅读 · 权威出处