和use-context-selector同时使用时的问题

[lhz87127855]

0.8之后已经解决了React原生的context的断层问题，所以内部采用fixed函数调用解决。 但是原生的context存在性能问题，所以会去使用use-context-selector来解决不必要的渲染。 这会导致二者同时使用时，进行路由切换会导致白屏 React 130错误 以下为猜测： use-context-selector内部采用的是ref的方式来存储context，此模式于react-activation中的对于context的处理不兼容。

[CJY0208]

可以给一个在线 demo 吗，没用过 useContextSelector

[wangjunget]

可以给一个在线 demo 吗，没用过 useContextSelector

我这边也遇到了这个问题 复现demo: https://codesandbox.io/s/ke-guan-bi-de-yi-fang-wen-lu-you-tab-shi-li-ke-an-lu-you-can-shu-fen-duo-fen-huan-cun-forked-o8xggq?file=/src/views/Item.js

路由切换即可复现

[lhz87127855]

谢谢提供demo，我最近在搞项目，没来得及搞demo

[CJY0208]

看了一下 use-context-selector 内部删除了 context.Consumer，这个行为导致了 react-activation 在尝试使用 context.Consumer 自动修复 context 问题时，渲染了一个 undefined 组件，导致了报错

报错比较好解决，在渲染 Consumer 前做个判断就好，而 use-context-selector 断层问题的修复方式，目前可用的方法是重新声明被删除的 Consumer 组件，如下

import React, { useContext } from 'react'
import { createContext } from 'use-context-selector'

const context = createContext(null)

function Consumer({ children }: any) {
  const ctxValue = useContext(context)

  return <>{children(ctxValue)}</>
}

// 重新声明 Consumer
context.Consumer = Consumer

这样的话，上下文修复的桥接处就恢复为了普通的 ctx 全量更新，失去 use-context-selector 的意义

[CJY0208]

v0.12.3 内重新声明了 Consumer，经验证，此问题已解决