Question

我有一个自定义的React钩子：

    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];
}

在组件中使用此类钩子时，每次值更改时返回的writeItem函数都会更改（大概是因为我每次都创建一个新数组）。

当我在这样的Item中使用钩子时，如何避免重新渲染Button组件？

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

我目前可行但尴尬的方法是返回一个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钩子来记住功能，以免在每个渲染器上都再次创建它们。

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];
}

从自定义React钩子返回函数数组？

1 个答案: