Reactjs 防止在Reaction中卸载

发布于01月19日

当我们更换conditionprops 时，有没有什么措施可以防止Widget组件被卸载并再次安装？

interface FooProps {
  condition:boolean
}

const Foo: React.FC<FooProps> = ({condition}) => {
  const widget = <Widget/>
  
  if(condition){
    return <ComponentA>{widget}</ComponentA>
  }
  
  return (
    <ComponentB>
      <ComponentC/>
      {widget}
    </ComponentC>
  )
}

推荐答案

它会卸载，因为该 node 不再存在于虚拟DOM中.你无法阻止这一点.

但是...

你可以弄些小把戏让它发挥作用

You can hide it via css个

您可以通过display: none有条件地隐藏组件，而不是有条件地呈现组件.它将挂载组件两次，但如果条件改变，它不会在重现器之间卸载

Use common parent个

如果元素在渲染器之间有相同的父元素，它将不会卸载.

 if (condition) {
    return <ComponentA><Widget key="widget"/></ComponentA>;
  }

  return (
    <ComponentA>
      <ComponentC />
      <Widget key="widget" /> 
    </ComponentA>
  );

<Widget key="widget" />key是必要的.因为来自ComponentA的子元素会编译成Reaction元素数组，所以使用key可以防止在元素顺序改变时卸载单个元素.在第一个条件Widget中是第一个元素，在第二个条件中是第二个元素

Use Portal个

您可以将Widget附加到虚拟DOM的同一 node ，并使用portals呈现在您想要的任何位置

import { createPortal } from 'react-dom' 

const Example = () => {
    const [s, ss] = React.useState(true)
    return (
        <>
            <button onClick={() => ss((o) => !o)}>click</button>
            <Foo condition={s} />
        </>
    )
}

const Widget = () => {
    React.useEffect(() => {
        console.log('Widget mount')
    }, [])

    return <>widget</>
}

const ComponentA = ({ children }: { children: React.ReactElement }) => {
    React.useEffect(() => {
        console.log('ComponentA mount')
    }, [])

    return <>{children} inside component a</>
}

const ComponentC = ({ children }: { children: React.ReactElement }) => {
    React.useEffect(() => {
        console.log('ComponentC mount')
    }, [])

    return <>{children} inside component c</>
}

const Foo = ({ condition }: { condition: boolean }) => {
    const ref = React.useRef<any>()
    let content
    if (condition) {
        content = (
            <ComponentA>
                <div ref={ref} />
            </ComponentA>
        )
    } else {
        content = (
            <ComponentC>
                <div ref={ref} />
            </ComponentC>
        )
    }
    return (
        <>
            {content}
            <Portal
                dependency={[condition]}
                elementRef={ref}
            >
                <Widget />
            </Portal>
        </>
    )
}

const Portal = ({ elementRef, children, dependency = [] }: any) => {
    const el = React.useRef<any>()
    if (!el.current) {
        el.current = document.createElement('div')
    }

    React.useLayoutEffect(() => {
        const element = elementRef.current
        element.appendChild(el.current)
        return () => {
            element.removeChild(el.current)
        }
    }, dependency)  // we need to execute this again if the content changes

    return createPortal(children, el.current)
}

在此示例中，<Widget />: