useState
如果说react重要的hooks都有那些,那么userState当之无愧。
这个hook可以在函数式组件中定义和更新状态(或者说是数据),它的返回是一个数组,第一个元素是状态变量,第二个元素是更新状态的函数
一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留,并且这个state可以如同变量一样被声明多次,
-
定义useState
//在jsx中使用useState,并且设置默认值 const [count, setCount] = useState(0); //在tsx中的useState const [count, setCount]: [number, any] = useState(0);
在这个示列中,count是可渲染的数据,setCount用于修改count的数据。根据命名规则,通常会在修改数据的方法添加set前缀,列如 [age,setAge]
-
使用useState
可以在函数组件中使用状态值来渲染UI或执行逻辑,例如:
<p>You clicked {count} times</p>
可以在函数组件中使用更新状态的函数来修改状态值,例如:
setCount(count + 1)
也可以传入一个函数作为参数,这个函数会接收上一个状态值,并返回一个新的状态值,例如:
setCount(prevCount => prevCount + 1)
当调用更新状态的函数时,React会重新渲染函数组件,并使用最新的状态值。