美文网首页
让react useState 像 class组件的setSta

让react useState 像 class组件的setSta

作者: 每天洗脸刷幸运值 | 来源:发表于2023-07-21 20:01 被阅读0次
import { useRef, useCallback, useState, useEffect } from 'react';

function useStateCallback<T>(
  initialState: T
): [T, (state: T, cb?: (state: T) => void) => void] {
  const [state, setState] = useState(initialState);
  const cbRef = useRef<((state: T) => void) | undefined>(undefined);

  const setStateCallback = useCallback(
    (mergedState: T, cb?: (state: T) => void) => {
      cbRef.current = cb;
      setState(mergedState);
    },
    []
  );

  useEffect(() => {
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = undefined;
    }
  }, [state]);

  return [state, setStateCallback];
}

export default useStateCallback;

相关文章

  • react hooks 之 useState

    useState useState 出现,使得 react 无状态组件能够像有状态组件一样,可以拥有自己 stat...

  • React Hook用法详解(6个常见hook)

    1、useState:让函数式组件拥有状态 用法示例: PS:class组件中this.setState更新是st...

  • useState & useReducer

    useState 在 React 函数组件中存储内部 state 通常会使用 useState hook 传入一个...

  • React Hook

    使用:在不编写class组件的情况下使用 useState useEffect / uselayoutEffec ...

  • react hook小记

    useState useState 返回的第一个值将始终是更新后最新的 state,并且与 class 组件中的 ...

  • React中setState的使用与同步异步

    在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setSta...

  • React Hooks

    前言 React中组件分为两大类:Class类式组件、函数式组件 React v16.8以前: Class类式组件...

  • 在 React 函数式组件中使用 useState, 变量,us

    在 React 函数式组件中使用 useState, 变量,useRef 的时机 变量 变量在每次组件重新渲染的时...

  • React知识点记录

    函数组件 React.FC 函数组件是最简单的组件定义方式,它接收唯一的 props 参数 useState 通过...

  • 学习react hook的总结

    react16推出了react hook,react hook使得functional组件拥有了class组件的一...

网友评论

      本文标题:让react useState 像 class组件的setSta

      本文链接:https://www.haomeiwen.com/subject/wobtpdtx.html