react hook中多个useImperativeHandle问题

Question

我如何让useMyState，Test 中ref都绑定到ref上并且都保持最新。

// 自定义hook
function useMyState(props, ref) {
    const [state, $state] = useState(props);
    useImperativeHandle(ref, () => ({
        getValue: () => {
            return state.value
        }
    }), [state.value])
    return [state, $state]
}
// react 组件
const Test = forwardRef((props, ref) => {
    const [state, $state] = useMyState(props, ref);
    const [show, $show] = useState(false);
    useImperativeHandle(ref, () => ({
        getShow: () => {
            return show
        }
    }), [show]);
    return <button onClick={() => {$show(!show)}}>text</botton>
})

<Test value={1} ref={ref} />

想到了另外一种玩法

// 自定义hook
function useMyState(props) {
    const [state, $state] = useState(props);
    const baseApi = useMemo(() => ({
        getValue: () => {
            return state.value
        }
    }), [state.value])
    return [state, $state, baseApi]
}
// react 组件
const Test = forwardRef((props, ref) => {
    const [state, $state, baseApi] = useMyState(props);
    const [show, $show] = useState(false);
    useImperativeHandle(ref, () => ({
                ...baseApi,
        getShow: () => {
            return show
        }
    }), [show]);
    return <button onClick={() => {$show(!show)}}>text</botton>
})

Answer 1

// 自定义hook
        function useMyState(props, ref, deps, obj) {
            const [state, $state] = useState(props);
            useImperativeHandle(ref, () => ({
                getValue: () => {
                    return state.value
                },
                ...obj
            }), [state.value, ...deps])
            return [state, $state]
        }

        // react 组件
        const Test = React.forwardRef((props, ref) => {
            const [show, $show] = useState(false);
            const [state, $state] = useMyState(props, ref, [show], {
                getShow() {
                    return show;
                }
            });
            return <button onClick={() => {
                $show(!show);
                $state(v => ({...v, value: v.value + 1}));
            }}>text</button>
        })

        const App = props => {
            const ref = useRef(null);
            const show = () => {
                console.log('show', ref.current.getShow());
                console.log('value', ref.current.getValue());
            }
            return (
                <Fragment>
                    <button onClick={show}>show</button>
                    <Test value={1} ref={ref} />
                </Fragment>
            );
        }

当作依赖穿进去试试