2.hooks的useState、useEffect的实际使用(Typescript)
注意:hooks只能在函数(无状态组件)中使用
从React16.8版本的hooks正式发布,hooks的使用是越来越火,从而出现了许多使用无状态组件(函数)+hooks替代有状态组件(类)来书写React组件的热潮,但是由于一些实际运用还有些缺乏,接下来介绍一下useState、useEffect两个hooks的一些简单使用吧
2.1 useState:官方文档就表明出,这个钩子就是在函数中能使用和class的state一样的状态管理,使用方式也较为简单,就不用做过多的介绍,直接上代码
简单的双向数据绑定
import React, {
useState } from 'react';
export default (): JSX.Element => {
const [count, setCount] = useState<number>(100);
return (
<>
<h2>{
count}</h2>
<button onClick={
()=>setCount(count + 1)}>++</button>
{
}
<button onClick={
()=>setCount((count:number)=>(count - 1))}>--</button>
</>
)
}
由于useState返回一个数组,第一个count参数就与有状态组件(类)中的state很相似,是无法改变的值,而第二个参数setCount就与有状态组件的setState差不多,较为简单