You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.7 KiB
40 lines
1.7 KiB
/* useState
|
|
1.导入 useState 函数 （从 react 导入）
|
|
2.执行这个函数并且传入初始值，必须在函数组件中
|
|
3.解构： [数据，修改数据的方法]
|
|
4.使用数据 修改数据 */
|
|
|
|
/* 状态的读取和修改
|
|
const [count, setCount] = useState(0)
|
|
1.useState 传过来的参数作为 count 的初始值
|
|
2. [count, setCount] 这里的写法是一个解构赋值，useState 返回值是一个数组
|
|
3. [] 里面的值名字可以自定义，保持语义化
|
|
4. [] 里面的值顺序不能更换，第一个参数是数据状态，第二参数是修改数据的方法
|
|
5. setCount 函数作用用来修改 count, 依旧保持不能直接修改原值，要生成一个新值替换原值。setCount（基于原值计算得到的新值）
|
|
6. count 和 setCount 是一对的，绑定在一起的，setCount 只能用来修改对应的 count 值 */
|
|
|
|
/* 组件的更新
|
|
当调用 setCount 的时候，更新过程：
|
|
|
|
首次渲染：
|
|
首次被渲染的时候，组件的内部代码会被执行一次，其中 useState 也会跟着执行，重点注意：初始值只在首次渲染是生效
|
|
|
|
更新渲染 setCount 都会更新
|
|
1. app 组件会再次渲染，这个函数会再次执行
|
|
2. useState 再次执行，得到的新的 count 值不是 0 ，而是修改之后的 1，模板会用新值渲染
|
|
|
|
重点：useState 初始值只在首次渲染生效，后续只要调用 setCount，整个 app 中代码都会执行，此时的 count 每次拿到的都是最新值
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
|
|
function App () {
|
|
const [count, setCount] = useState(0) // 0 是初始值
|
|
return (
|
|
<div>
|
|
<button onClick={ () => setCount(count + 1)}>{count}</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|