注意：在我们开始之前，我想确保你知道，当满足以下条件的某个组合时，优化你的上下文值很重要：
- 你的情境值经常变化
- 你的上下文有很多消费者
- 你正在费力地使用
React.memo（因为事情是合法的慢的）。 - 你已经实际测量了事情，你知道它很慢，需要优化。
如果这说明了你的情况，那么请继续阅读（不要错过另一个解决方案，说实话，这个方案可能更好）。事实上，替代方案肯定更好，我已经重写了这篇博文，删除了我原来的建议，只显示替代方案。如果你想看我的原文，请阅读这里的原文。
不，说真的，如果你只是因为觉得你的代码可能会很慢而要做这些东西，那么就不要费心了。我不是在开玩笑。React真的很快，在性能足够好的情况下，以性能的名义增加复杂性，只是浪费了你的 "复杂性预算"
优化你的上下文值的最简单的解决方案包括使用useReducer 或useState 来管理你的状态，并把state 放在一个上下文提供者中，把dispatch 放在另一个。这里是这样的。
在这种情况下，你不仅不需要useMemo ，而且你实际上可以避免重新渲染那些只使用更新器上下文的组件。
这和我原来的useMemo 方案一样，只是因为<Counter /> 组件的上下文没有被更新，我们完全避免了对该组件的重新渲染，这很酷。
我个人觉得这比大多数情况下需要的API更复杂，所以我不会费心去优化我的大多数上下文。但是如果你真的有上面提到的所有问题，那么可以考虑这样做，作为一个简单的方法来回避这个问题。
状态和调度的分离是令人讨厌的
有些人觉得这很烦人/过于冗长：
const state = useCountState()
const dispatch = useCountDispatch()
他们说 "我们就不能这样做吗？"：
const [state, dispatch] = useCount()
你当然可以：
function useCount() {
return [useCountState(), useCountDispatch()]
}
只是要记住，任何使用这个的组件，如果它只需要一个或另一个，你将失去性能上的优势。
