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
use Memo
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';