我的同事说,他找到的文章指出,在Reaction中纪念Redux动作创建者时,性能会提高,但我还没有找到任何支持这一点的东西,我也看不出这有什么帮助.

下面是我所说的一个例子:

const Component = () => {
    const dispatch = useDispatch();
    
    const actions = useMemo(() => ({
        updateField: (...args) => dispatch(updateField(...args)),
        blurField: (...args) => dispatch(blurField(...args)),
        clearAllFields: (...args) => dispatch(clearAllFields(...args)),
    }), [dispatch]);
    
    return (
        <button onClick={actions.clearAllFields}>Clear</button>
    )
}

这有意义吗?我就是不明白为什么?在组件的整个生命周期中,调度函数不应该更改,操作创建者也不应该更改,因此,无论您是否记住操作创建者,重现器的数量都不应该增加.

Note:这与记忆Redux状态的主题无关.

推荐答案

它没有意义,在这个特定的例子中是especially.

是的,严格来说,创建一个函数实例有一个非零的成本,就像创建i++个函数实例一样有一个成本.

现在,调用useMemo is在每次渲染时创建one个函数实例,非常严格地说,每次创建one个实例都比每次创建three个实例便宜updateField/blurField/clearAllFields个.

但这还不够有意义,值得担心.

此外,try 在此处维护same个函数引用没有任何好处.子元素是<button>;它没有包装在React.memo()中以避免重新呈现;并且没有更多嵌套子组件,因此通过深树递归呈现它不会产生额外的react 开销.

实际上,我在我的帖子A (Mostly) Complete Guide to React Rendering Behavior中谈到了其中的一些要点.

所以,在这里拨打useMemo不是wrong,但绝对不是necessary,在这种情况下我真的不会麻烦它.

Reactjs相关问答推荐

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态,而不是呈现?<>

404使用GitHub操作部署Next.js应用程序时出错

为什么Next.js 14无法解析页面路由路径?

TypeError:b不是React.js中的函数错误

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

为多租户SSO登录配置Azure AD应用程序

React-React中是否完全支持基于类的组件?

使用Next.js和Next-intl重写区域设置

滚动视图样式高度没有任何区别

Material-UI 和 React Hook 表单不记录值

tRPC/react-query,在所有查询完成之前,组件不会收到任何 useQuery 的结果

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

验证 Yup 中的对象项

使用D3.js绘制和展示弦图的右下方象限

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

状态链接未传递到路由页面

作为单个变量的 React 组件是否比 memoized 组件渲染得更快?

如何在对话素材ui中设置边框半径?

如何定制 React 热 toastr ?

在表格中显示具有自定义声明的用户状态