在功能组件的内部函数内调度动作答案

【问题标题】：Dispatching actions inside inner functions of funtional component在功能组件的内部函数内调度动作
【发布时间】：2021-07-01 01:58:21
【问题描述】：

我读到，当我们使用 setState 或该函数作为 prop 传递给子组件时，应使用 useCallback 定义 statefull 功能组件中的内部函数。但是调度动作呢？我们还需要在那里使用“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 仍然可以工作，除非您依赖状态或变量的当前值来实现某些目标。
如果 handleClick 作为道具传递给某个组件，该组件在每次渲染时执行一些计算量很大的功能，您可能希望使用useCallback。 useCallback 意味着这个子组件的重新渲染不会被handleClick 重新创建而触发。这里没有理由使用它。
我看不出您需要在代码中的哪个位置调用 useCallback，因为您没有任何变量会影响导致组件重新渲染的组件。

标签： reactjs react-redux usecallback

【解决方案1】：

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

强大的 useMemo 和 useCallback 钩子在输入（或“依赖项”）数组不存在的情况下在重新渲染之间创建一个引用稳定 (prev === current) 的值'不要改变它的价值（再次，参考）。这允许您将值传递给的子组件使用React.memo 和类似工具来记忆自己。

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

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

【讨论】：

感谢@PierPaoloRamon。只是想遵循最佳实践。还想减少一个组件的重新渲染次数，因为我观察到 console.log("component rerendered") 打印了 7-8 次

【解决方案2】：

dispatch 不会影响您的内部功能。当您在没有 useCallback 或 useCallback 的情况下创建内部函数但依赖项已更改时，将重新创建您的内部函数

您可以将dispatch 作为useCallback 的依赖项并像普通函数一样使用它

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

【讨论】：