React hooks篇 useEffect useState useCallbak useMemo

目录

useState

useEffect

useCallback

useMemo

---

useState

useState有的有一个入参，可以是数据或者一个带有返回值的函数，对应类型

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]

useState有两种创建方式

第一种 在参数里直接传入一个数据

const [num, setNum] = useState(1);

第二种 在参数里使用函数必须return返回一个值，可以调用在useState注册之前的函数

const [num, setNum] = useState(() => {
  return 2+2;
});

修改state状态时也有两种方式 注意 useState的修改会在把当前操作里的setState放到一起执行

第一种 这种方式当前函数num拿到的值永远是1,因为setState会在当前操作结束后统一执行

const [num, setNum] = useState(1);
function fun () {
    setNum(num + 1) // 2
    setNum(num + 1) // 2
};
fun();

第二种 当setState是一个函数时，函数的参数则是改state上一次修改之后的值

const [num, setNum] = useState(1);
function fun () {
    setNum(num + 1) // 2
    setNum((state)=> { // 2
        return state + 1 // 3
    }) 
};
fun();

useEffect

useEffect 有两个入参，第一个参数是一个函数，第二个参数可选，需要是数组，对应类型

function useEffect(effect: EffectCallback, deps?: DependencyList): void

useEffect的功能类似生命周期，但react开发团队不支持把useEffect当作生命周期来使用，后续react团队可能会淡化的完善useEffect的功能

当第二个参数为空的时候，组件发生任何的state或props等改变时都会触发第一个参数的函数

当第二个参数为空数组的时候，只会在组件初始化执行一次

当第二个参数为数组，并且里面有监听数据的时候，在对应数据发生改变时和初始化的时候，都会触发一次参数一的函数

当参数一的函数有return返回一个函数时，在组件注销阶段会调用该函数

useEffect(() => {
  console.log('初始化');
  return () => {
    console.log('注销拉')
  }
}, [])

useCallback

useCallback是一个性能优化的hook，有两个参数，通useEffect，但第二个参数是必选，类型如下

function useCallback<T extends Function>(callback: T, deps: DependencyList): T

当组件mount时会注册组件内部的函数，useCallback会把当前函数的参数一给缓存下来，包括但不限于函数内容使用到的state状态等，当参数二监听的数据没有修改时，在update的时候不会重新注册该函数

const [num, setNum] = useState(0);
const [count, setCount] = useState(0);

const fun = () => {
  setCount(count + 1);
  return count + 1;
}

const clickHandle = useCallback(() => {
  console.log('count', count, 'num', num, 'fun', fun());
  // 1.当num没有改变时触发该函数结果是 0 0 1 fun改变了count，并且返回count + 1所以fun是1
  // 2.当count改变再触发该函数结果是 0 0 1 count改变了，但是因为num没有改变，这里使用的还是老数据，
  // 3.当num改变再触发改函数结果是 2 1 3 num改变了，此时count是2，但fun调用了，所以fun是3
}, [num])

return (
  <div>
    <div>num: {num}</div>
    <div>count: {count}</div>
    <button onClick={() => setNum(num + 1)}>num + 1</button>
    <button onClick={() => setCount(count + 1)}>count + 1</button>
    <button onClick={clickHandle}>触发click</button>
    <button onClick={fun}>触发fun</button>
  </div>
)

useMemo

useMemo是一个性能优化的hook，有两个参数，通useEffect，但第二个参数是必选，类型如下

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T

useMemo相当于是一个监听部分数据自修改的state，当组件mount时会注册组件内部的函数，useMemo会把当前函数的参数一return的值给缓存下来，包括但不限于函数内容使用到的state状态等，当参数二监听的数据没有修改时，在update的时候不会重新计算改函数

const [num, setNum] = useState(1);
const [count, setCount] = useState(1);


const memoNum = useMemo(() => {
  return num + count
}, [num])

return (
  <div>
    <button onClick={() => setNum(num + 1)}>num + 1</button>
    <button onClick={() => setCount(count + 1)}>count + 1</button>
    memoNum的值是: {memoNum}
    // mount加载完成结果是 2
    // count改变 2
    // num改变 4
  </div>
)