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 踩坑记录 不要使用奇技淫巧