当作为道具传递时，组件在道具更改时卸载

Question

我有一个组件，它采用另一个组件作为道具，如下所示，

  <WrapperComp
  isEnabled = { enabled }
  view = { (payload) => {
    return <Test { ...props } testProp= { payload} />;
  } } />

这里 view prop 是一个组件，每次 props 发生变化时，都会导致 Test 组件卸载并重新挂载。 有什么办法可以避免这种情况。

Wrapper 组件是显示 View 组件的简单组件，如下所示

const WrapperComp = (
  {View}
) => {
  return <View payload={ 'some payload' } />;
};

Answer 1

我弄清楚了为什么它再次卸载和安装，这里的问题是我将 function 组件作为道具传递，其参考在每次重新渲染时都会发生变化，因此每次包装器重新渲染时都会传递新组件，解决方案之一是使用“使用回调”

<WrapperComp
  isEnabled = { enabled }
  view = { useCallback((payload) => {
    return <Test { ...props } testProp= { payload} />;
  }, []) } />