React Hook 总是以完全相同的顺序进行调用,出于函数顶层,不能在 if、循环、class中使用Hook。
使用useState
Hook
- useState 返回值是一个数组
- 数组第一个值是状态(state)
- 数组第二个值是改变该状态的函数(setState)
// 创建一个名为:count 的状态, 状态值为4(这里是number类型),setCount: 可以改变 count 的状态。
const [count, setCount] = useState(4);
改变状态值: 在当前状态下改变
- 方法一 :
// 使用当前的状态值进行改变 --- 当前值 - 1;
setCount(count - 1);
// 因为没有传入值类型限制,所以 `count` 状态值类型为any;可以直接设置其他类型的值。
setCount("复制");
- 方法二
// 使用函数,参数prevCount 是上一个状态值,减一后设置新值
setCount(prevCount => prevCount - 1);
初始化赋值
- 方法一
// 创建状态 count ,并直接初始化值为 4。
// 组件更新状态时都会执行一次初始化。
const [count, setCount] = useState(4);
- 方法二
// 创建状态 count, 并使用函数返回值,初始化值为4
// 该方法初始化执行一次。
const [count,setCount] = useState(() => 4);
创建的状态(state)类型为Object 时
- 注意需要改变Object 中的一个值时,需要把整个Object替换。useState Hook 没有自动合并对象的功能。
// 初始化
const [state, setState] = useState({count:4, theme: 'blue});
// state中的count 进行加1
setState(prevState => {...prevState, count:prevState.count + 1});