有什么理由要在 React 中记住 Redux 操作创建者吗？

Question

我的同事表示，他发现的文章指出在 React 中记忆 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>
    )
}

这有道理吗，但我就是不明白为什么？调度函数在组件的生命周期中永远不应该改变，动作创建者也不应该改变，因此无论您是否记住动作创建者，重新渲染的数量都不应该增加。

注意：这与记忆 Redux 状态的主题无关。

Answer 1

没有任何意义，尤其是在这个特定的例子中。

是的，严格来说，创建函数实例具有非零成本，就像

i++

具有成本一样。

现在，调用

useMemo

is 在每次渲染上创建 one 函数实例，严格来说，每次为 updateField/blurField/clearAllFields 创建 one 实例比创建

 Three

实例便宜。

但这还没有意义到值得担心。

此外，尝试在此处维护 same 函数引用没有任何好处。子元素是

<button>

；它没有被包裹在

React.memo()

中以避免重新渲染；并且没有进一步嵌套的子组件，因此 React 不会通过深层树递归来渲染它的额外成本。

我实际上在我的文章React渲染行为的（大部分）完整指南中涵盖了其中的一些要点。

所以，在这里打电话useMemo并不是

错

，但绝对没有必要，在这种情况下我真的不会费心。