Javascript 切换上下文会导致重新呈现整个组件

我目前面临的挑战是，我的Layout.js中有两个不同的组件 组成部分。这两个组件必须相互“共享”道具。为了解决这个问题，我添加了一个ContextProvider

IntegrationProvider

但是，现在我遇到了一个问题，每当

currentElement.type

发生更改时（因此

IntegrationProvider

发生更改），整个布局组件都会重新呈现。我目前最好的想法是为所有集成创建一个ContextProvider。但是，这将导致其他集成中出现许多不必要的道具。你有更好的主意吗

Space.js

<IntegrationProvider>
  <Layout
    [props...]
  />
</IntegrationProvider>

IntegrationProvider.js

const integrationProvider = {
  [INTEGRATION_TYPE.DAILY]: IntegrationProviderDaily,
};

const IntegrationProvider = ({ children }) => {
  const currentElement = useSelector(getCurrentElement);

  /**
   * Return IntegrationProvider if available, otherwise just return children.
   */
  const getIntegrationProvider = () => {
    const IntegrationProvider = integrationProvider[currentElement?.type];

    return IntegrationProvider ? (
      <IntegrationProvider children={children} />
    ) : (
      children
    );
  };

  return getIntegrationProvider();
};

export default IntegrationProvider;

const integrationProvider={
[INTEGRATION_TYPE.DAILY]：IntegrationProviderDaily，
};
const IntegrationProvider=（{children}）=>{
const currentElement=useSelector（getCurrentElement）；
/**
*返回IntegrationProvider（如果可用），否则只返回子级。
*/
常量getIntegrationProvider=（）=>{
const IntegrationProvider=IntegrationProvider[currentElement？.type]；
返回IntegrationProvider(
) : (
儿童
);
};
返回getIntegrationProvider（）；
};
导出默认集成提供程序；

IntegrationProviderDaily.js

const IntegrationProviderDaily = ({ children }) => {
  const dailyRef = useRef();
  [...]

  const muteUser = (userId, device) => {
    // Do stuff
  };

  return (
    <DailyContext.Provider
      value={{
        dailyRef,
        muteUser,
      }}
    >
      {children}
    </DailyContext.Provider>
  );
};

export default IntegrationProviderDaily;

const IntegrationProviderDaily=（{children}）=>{
const dailyRef=useRef（）；
[...]
常量muteUser=（用户ID，设备）=>{
//做事
};
返回(
{儿童}
);
};
每天导出默认集成Provider；

它完全刷新的原因是您正在将

IntegrationProvider

赋值给一个变量。这意味着您在每个渲染上都有一个不同的组件实例，而不是同一个组件，但具有更新的

值

const IntegrationProvider = integrationProvider[currentElement?.type];

另一方面，我发现这段代码很难阅读，因为您的局部变量与组件本身具有相同的名称。这不是你问题的原因，但它是要避免的

你应该考虑让一个上下文提供程序有两个可能的值，或者让它们完全分离。老实说，我不知道这对你有什么作用。你说这两个上下文有不同的值。所以，当一个孩子从上下文中访问值时，他怎么知道得到了什么呢？
嗨，琳达，谢谢你的回答。事实上，我现在用一种完全不同的方式解决了这个问题。它解决了我面临的大部分挑战。：）