Reactjs 在另一个函数中使用useCallback可以吗？

我有如下（TypeScript）代码：

export const DemoComponent = React.memo((props: DemoComponentProps) => {
    const [state1, setState1] = React.useState<string | undefined>('');
    const [state2, setState2] = React.useState<string | undefined>('');
    const createF = (b: boolean) => React.useCallback(() => {
        /* code that does not depend on b or state2 */

        doSomething({ param: 'param', param2: b ? undefined : state2 });

        if (!b) setState2(/* some other value */);
    }, b ? [state1] : [state1, state2]);
    const f1 = createF(false);
    const f2 = createF(true);

    return (
        /* a few components, some of which use f1, while others use f2 */
    );
});

export const DemoComponent=React.memo（（props:DemoComponentProps）=>{
const[state1，setState1]=React.useState（“”）；
const[state2，setState2]=React.useState（“”）；
const createF=（b:boolean）=>React.useCallback（（）=>{
/*不依赖于b或state2的代码*/
doSomething（{param:'param'，param2:b？未定义：state2}）；
如果（！b）设置state2（/*其他值*/）；
}，b？[state1]：[state1，state2]）；
常数f1=createF（false）；
常数f2=createF（真）；
返回(
/*一些组件，其中一些使用f1，而另一些使用f2*/
);
});

---

useCallback

在这里会像预期的那样工作吗（好像我只为

f1

和

f2

写了两次，并重写了所有使用

b

的地方），还是会出问题呢？

你不能像这样使用

useCallback

不要从常规JavaScript函数调用钩子

• 来自React函数组件的调用挂钩
• 从自定义钩子调用钩子

钩子必须在函数组件的顶层调用

此外，您应该得到eslint警告：

react hooks/rules of hooks

在函数中调用了React挂钩“useCallback”。。。它既不是React函数组件，也不是自定义React钩子函数

---

为什么在组件级别使用React.memo？（记住：过早优化是万恶之源！我认为你不需要它……）。另外，

useCallback

本身是记忆化的，如果其道具不变，React组件将不会重新呈现。@Vinzzz基本上我们公司的政策是在任何地方使用memo。我是新来的（在我的公司），所以我不能真正挑战这种方法，即使我不想盲目做事。。。这种防御性编程（“到处使用X，因为……谁知道呢？安全总比抱歉好”）这是一个坏消息practice@Vinzzz我知道它是备忘录，我在问它的备忘录是否仍能正常工作，即使我不仅仅使用useCallback，而是将它包装在另一个文件中function@Vinzzz我知道我不应该过早地进行优化，但这份备忘录早在我之前就存在了，所以也许它是必要的。我只是用它来展示这家公司是如何进行优化的component实际上是创建的，您可以…它是被记忆的组件…它不会打破钩子规则：定义到组件中的钩子数组（state1、state2、callback）永远是最重要的same@Vinzzz你试过了吗？检查一下，还有eslint警告it@DennisVash谢谢你的页面，这正是我想要的。虽然我想我可以使用useCallback，正如我展示的那样，因为订单仍然是一样的。我不知道什么是“意味着。。。依我看，问题不在于顶级的

React.memo

包装组件-这似乎很好。问题确实出在

createF

定义上，它根据

b

的不同，用不同的依赖项包装钩子

useCallback

。我认为在这里，

useCallback

应该被

useMoom

所取代，它始终依赖于

state1

和

state2

。（所以你是对的：这个例子打破了hooks规则）@Vinzzz抱歉这是我的cat:P。不管怎样，这个代码在很多方面都不正确，我想我已经解释了原因。