从React函数内部导出函数

Question

我有一个处理React Native位置的函数。出于演示:

const useLocation = () => {
const [fetchingLocation, setFetchingLocation] = useState(true);
...
const changeSystemPermissions = useCallback(() => {...});
useEffect(() => {
//does many things
}, [...])
}

我需要在useLocation中使用changeSystemPermissions函数，因为它使用状态。我意识到我可以将changeSystemPermissions函数导出为具有return [changeSystemPermissions, ...]的const，然后将其导入到另一个组件中:

const [
changeSystemPermissions,
...
] = useLocation();

但是，它也将运行useEffect函数。我确实希望它运行一次，但我需要在几个其他组件中访问changeSystemPermissions，我不希望useEffect运行多次。

我想我只是拿出useLocation之外的changeSystemPermissions函数，但它需要使用状态。我想我可以将状态变量传递到changeSystemPermissions，当它在useLocation之外时，但那将是冗长和丑陋的。

如何导出changeSystemPermissions和该函数而无需导入整个useLocation函数?

Answer 1

能否将useEffect移动到组件中?

const useLocation = () => {
const [fetchingLocation, setFetchingLocation] = useState(true);

const changeSystemPermissions = useCallback(() => {
...
});
const funcToExecute = useCallback(() => {
....
}, []);
return { changeSystemPermissions, funcToExecute } 
}

放到组件中:

const {
changeSystemPermissions,
funcToExecute, 
} = useLocation();

useEffect(() => {
funcToExecute()
}, [...])

同样，如果你真的需要useEffect在自定义钩子中，

也许你可以给这个钩子添加一个参数。

const useLocation = (shouldTriggerEffect) => {
const [fetchingLocation, setFetchingLocation] = useState(true);

const changeSystemPermissions = useCallback(() => {
...
});

useEffect(() => {
if (shouldTriggerEffect) {
...
}
}, [shouldTriggerEffect])
return { changeSystemPermissions, funcToExecute } 
}

然后在组件中，

const {
changeSystemPermissions,
} = useLocation(false);

告诉我，如果我误解了什么，或者如果它有帮助:)

Answer 2

当你在React功能组件中调用钩子时，它将为该钩子创建一个新状态，并且不会在组件之间共享。但是有一个库可以帮你做到这一点:

https://github.com/betula/use-between

你可以按照这个例子来使用这个库，或者只是阅读代码，并利用这种方法在组件之间共享钩子状态。