javascript - 从自定义 react 钩子(Hook)返回函数数组？

Question

我有一个自定义 react 钩子(Hook):

    function useItem(id) {

        const [value, setValue] = useState();

        useEffect(() => {
            databaseRead(id).then(i => setValue(i));
        }, [id]);

        function setItem(i) {
            setValue(i);
        }

        function writeItem(i) {
            databaseWrite(id, i);
        }

    return [value, setItem, writeItem];
}

在组件中使用这样的钩子(Hook)时，返回的 writeItem 函数每次值更改时都会更改(大概是因为我每次都创建一个新数组)。

当我在这样的项目中使用我的钩子(Hook)时，如何避免重新呈现 Button 组件？

function Item(props) {
    const [item, setItem, writeItem] = useItem(props.id);
    return(
        <>
            <ItemEditor data={item} setItem={setItem}/>
            <Button onPress={writeItem}/>
        </>
    )
}

我目前工作但尴尬的方法是从我的钩子(Hook)返回一个 useRef 对象而不是数组:

function useItem(id) {
    const retVal = useRef({
       value: value, 
       setItem: setItem, 
       writeItem: writeItem
    }).current;

    const [dirty, setDirty] = useState();
    function makeDirty() { setDirty(Math.random()); }

    //and instead of setValue(i) do retVal.value=i; makeDirty();
    return retVal;
}

非常感谢!

Answer 1

您可以使用 useCallback 钩子(Hook)来内存函数，这样它们就不会在每次渲染时再次创建

function useItem(id) {

        const [value, setValue] = useState();

        useEffect(() => {
            databaseRead(id).then(i => setValue(i));
        }, [id]);

        const setItem = useCallback(function(i) {
            setValue(i);
        }, []);

        const writeItem = useCallback(function(i) {
            databaseWrite(id, i);
        }, [id]) // this depends on id, and need to be recreated on id change

    return [value, setItem, writeItem];
}