React
界面工具React 是把页面拆成可复用组件、并随状态变化更新界面的 JavaScript 库例如,点击加号更新计数后,读取该数值的组件会重新显示。先判断哪个值变了、哪块界面在读它;简单且不持续变化的页面未必需要 React。
先知道
也常被叫作React.js
开始前
知道按钮上的数字会随点击增加。
看完后
能说出 React 中一次点击怎样改变当前数值,并让相关界面重新显示。
点加号后,为什么只更新这块?
Counter.jsx
1
const [count, setCount] = useState(0)2
<button onClick={() => setCount(count + 1)}>3
已加入 {count} 件4
</button>帆布包¥ 79
状态里的 count 现在是 0
按钮读着 count;count 改了,React 就把这块按钮文字换成新值。
刚才发生了什么
- 1组件是一小块界面
按钮可以是一块独立的界面,旁边的待办列表也可以是另一块。
- 2状态记住当前值
点击把计数从 0 改成 1;状态就是这块界面此刻要显示的值。
- 3React 按新值显示
React 用新的数值重新生成相关界面,所以按钮文字变了。
先判断“哪个值变了、哪块界面读它”;页面很简单且没有持续变化时,不必急着上 React。
接下来学什么
延伸阅读 · 权威出处