为何React Context传递{[name]:state}时仅state变化触发重渲染？

核心原因 #

你的Provider组件本身只有在state变化时才会触发重渲染，所以即便每次渲染都创建新的{[name]: state}对象，也只有当state真正改变时，才会生成新的value引用，进而触发消费组件更新。

详细拆解 #

1. React Context的更新逻辑：只有当Provider的value发生引用变化时，所有消费该Context的组件才会重新渲染。但这个过程的前提是——Provider所在的组件必须先发生重渲染，才会生成新的value对象。
2. 你的Provider组件重渲染触发条件：假设name是固定的切片名称（不会动态变化），且组件没有其他额外的依赖项（比如父组件传递的可变props、自身其他state），那么这个组件的重渲染只会由内部state的变化驱动。当state不变时，组件根本不会重新执行，自然不会创建新的{[name]: state}对象，消费组件也就不会收到更新通知。
3. state变化时的流程：只有当state更新，Provider组件才会重新渲染，此时生成的新对象引用和之前不同，消费组件感知到value变化，才会触发重渲染——这正好是你想要的最优行为。

关于useMemo的必要性 #

你之前认为需要用useMemo缓存value，是一种更严谨的写法，主要应对Provider组件可能因其他因素重渲染的场景：比如未来你给组件添加了其他可变props、或者组件内部新增了其他state，此时即使name和state都没变，每次渲染都会生成新的{[name]: state}对象，导致消费组件无意义的重渲染。这种情况下，useMemo能通过缓存value的引用，避免不必要的性能损耗。

你的测试中两种写法表现一致，只是因为当前场景下Provider的重渲染完全由state驱动，没有其他触发因素。但从代码鲁棒性考虑，还是建议保留useMemo的写法，预防未来可能出现的性能问题。

内容的提问来源于stack exchange，提问作者roggc