React Hooks 的一些 API 方法 使用

 useState

import React, { useState } from 'react';

const demo = () => {
    const [count, setCount] = useState(0);
    // 加
    const add = ()=>{
        let num = count
        setCount(num + 1)
    }
    //减    
    const delete = ()=>{
        let num = count
        setCount(num - 1)
    }
    return (<div className='FullCakendarDom'>
        <div> {count} </div>
        <button onClick={add}> 加 </button>
        <button onClick={delete}> 减</button>
    </div>)
}
export default demo 

 useEffect

import React, { useState, useEffect } from 'react';

const demo = (props) => {
    const { flag = false} = props
    const [count, setCount] = useState(0);

    useEffect(()=>{
        setCount( flag ? 1 : 0)
    },[flag]) // 监听 flag 的变化 并执行 useEffect 参数1 箭头函数里的方法

    return (<div className='FullCakendarDom'>
        <div> {count} </div>
    </div>)
}
export default demo 

 useMemo

import React, { useState, useEffect, useMemo } from 'react';

const demo = () => {
    const [count, setCount] = useState(0);
    // 加
    const add = ()=>{
        let num = count
        setCount(num + 1)
    }
    //减    
    const delete = ()=>{
        let num = count
        setCount(num - 1)
    }

    // 类似于计算属性 对值的缓存 所依赖的变量改变时才会执行
    const memoNum = useMemo(()=>{
        let str = '当前小于：10 ' 
        if(count >= 10) str = '当前大于 || 等于：10 ';
        return str
    },[count])

    return (<div className='FullCakendarDom'>
        <div> {count} </div>
        <div> {memoNum } </div>
        <button onClick={add}> 加 </button>
        <button onClick={delete}> 减</button>
    </div>)
}
export default demo 

 useCallback

import React, { useState, useEffect, useMemo, useCallback } from 'react';

const demo = () => {
    const [count, setCount] = useState(0);
    const [count2, setCount2] = useState(0);
    // 加
    const add = ()=>{
        let num = count
        setCount(num + 1)
    }
    //减    
    const delete = ()=>{
        let num = count
        setCount(num - 1)
    }
    // 无依赖值的情况
    const setTimeCount1 = useCallback(() => {
          setTimeout(() => {
            setCount(10);
          }, 2000);
    }, []);
    useEffect(()=>{
        setTimeCount1()
    },[])
    // 有依赖值的情况
    const setTimeCount2 = useCallback(() => {
          setTimeout(() => {
            setCount2(count);
          }, 2000);
    }, [count]);
    useEffect(()=>{
        setTimeCount2()
    },[count])

    return (<div className='FullCakendarDom'>
        <div> {count} </div>
        <div> {memoNum } </div>
        <div> {count2} </div>
        <button onClick={add}> 加 </button>
        <button onClick={delete}> 减</button>
    </div>)
}
export default demo 

 useContext

import React, { useState, useEffect, useMemo, useCallback , useContext } from 'react';

 useRef

import React, { useState, useEffect, useMemo, useCallback , useContext, useRef } from 'react';

  useImperativeHandle

import React, { useState, useEffect, useMemo, useCallback , useContext, useRef, useImperativeHandle } from 'react';