React useImperativeHandle 踩坑记录 不要使用奇技淫巧

使用React的useImperativeHandle时,如果在传入的函数中使用了state,将会导致调用Handle时state读取为上一个状态。

解决方案:

const realState = useRef({ state1, state2 });
useEffect(() => {
    realState.current.state1 = state1;
}, [state1]);
useEffect(() => {
    realState.current.state2 = state2;
}, [state2]);
useImperativeHandle(ref, () => ({
    foolfun: () => {
        const { state1, state2 } = realState.current;
    }
}));

在React相关issue中有人讨论了这个问题,FredyC说

That’ s a pretty common “bug” caused by Javascript closures. React apparently is not recreating handle on every render so it will always see only the value from the first render.

当时的问题好像是state只会使用初始值,他解释了JavaScript的闭包会导致这个问题,最后在16.8.2后修复了这个bug。

然而,为什么现在还会有这个问题,我是没看懂。但React的useImperativeHandle给出了和预期不符的功能,并且没有在文档中体现,这个锅还是React背。

另外,尽量不要使用useImperativeHandle,而是按照官方建议的通过改变Props来调用子组件。否则就会像我这样,使用各种奇技淫巧,导致稀奇古怪的bug。

相关链接:https://github.com/facebook/react/issues/14782

欢迎来到Yari的网站:yar2001 » React useImperativeHandle 踩坑记录 不要使用奇技淫巧

评论

3+3=