reactjs - 自定义钩子触发每个渲染

Question

我想在组件安装时运行回调，但不是在每次渲染时运行。使用useEffect和一个空的依赖数组创建了警告。我在另一个线程上阅读，现在我找不到可以通过创建自定义钩子来实现这一点：

import {useRef} from "react";

const useInitialise = (callback) => {
    //TODO this is running every render!
    const runOnce = useRef(false);
    if (!runOnce.current) {
        callback();
        runOnce.current = true;
    }
}

export default useInitialise;

用法：

useInitialise(() => {
    //callback
});

这不是使用：

useEffect(() => {
        //callback
    }, []);

因为这会产生警告。我知道每次渲染都会调用钩子，但为什么runOnce.current不阻止回调运行两次？

Answer 1

找到线索了！

我应该使用状态来跟踪已安装/未安装，然后使用Effect 仅在已安装或回调更改时调用回调：

import {useEffect, useState} from "react";

const useInitialise = (callback) => {
    const [mounted, setMounted] = useState(false)
    useEffect(() => {
        if (!mounted) {
            setMounted(true);
            callback();
        }
    }, [mounted, callback]);
}

export default useInitialise;