React进阶用法和hooks的个人使用见解(Typescript版本) - 2.hooks的useState、useEffect、自定义钩子的实际使用

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 => {
   
    //在typescript中，useState是一个泛型函数，可以传入对应的类型
    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差不多，较为简单