在功能组件的内部函数中分派动作

如何解决在功能组件的内部函数中分派动作

我读到当我们使用 setState 或该函数作为 prop 传递给子组件时，应使用 useCallback 定义有状态功能组件中的内部函数。但是调度动作呢？我们还需要在那里使用“useCallback”吗？

import React from "react";
import { logout } from "../../../../actions/auth";
import { usedispatch } from "react-redux";

function Navbar (props) {
    ...

    const dispatch = usedispatch();

    const handleClick = () => {
        dispatch(logout());
    }

    return (
       <div> 
         <button onClick={handleClick}>logout</button> 
       </div>
    )
}

解决方法

所以首先你需要知道为什么你有时需要useCallback围绕你的函数和监听器。

强大的 useMemo 和 useCallback 钩子在输入（或“dependencies”）数组不会改变它的值（再次，引用）。这允许您传递值的子组件使用 prev === current 和类似工具进行记忆。

你为什么需要让他们记住？出于性能原因。性能优化的第一条规则是不要过早优化。因此，不要盲目地将所有内容都包含在 useCallback 和 useMemo 中：编写您的代码，并且只有在遇到某些性能瓶颈时才调查并最终使用这些钩子解决。

要回答您的问题，React.memo 函数是否需要包装？正如我从你的代码推断，我们正在谈论 React Redux 的调度。答案是否：React Redux dispatch、useReducer 的 dispatch、useState 的 updater 函数都是引用稳定的。

,

dispatch 不会影响您的内部功能。当您在不使用 useCallback 或使用 useCallback 但依赖项发生变化的情况下创建它时，您的内部函数将被重新创建

你可以把 dispatch 作为 useCallback 的依赖，像普通函数一样使用

const handleClick = useCallback(() => {
    dispatch(logout());
},[dispatch])