【发布时间】：2019-12-18 19:29:37
【问题描述】：
问题：
在下面的代码中，当单击Toggle ParentA/B 按钮时，<Child /> 组件将被卸载并再次重新安装，尽管实际上只有Parent 组件发生了变化。
如何防止Child在这种情况下卸载和重新安装？
import React, { useState } from "react"
const App = () => {
const [a, setA] = useState(true)
return (
<div>
<button onClick={() => setA(!a)}>Toggle ParentA/B</button>
{a ? <ParentA><Child /></ParentA> : <ParentB><Child /></ParentB>}
</div>
)
}
const ParentA = ({ children }) => <div>parentA{children}</div>
const ParentB = ({ children }) => <div>parentB{children}</div>
class Child extends React.Component {
componentDidMount() {
console.log('child did mount')
}
componentWillUnmount() {
console.log('child will unmount')
}
render() {
return (
<div>child</div>
)
}
}
export default App
回复可能的答案：
为什么不让 Child 组件重新挂载，因为它只是一个
<div>元素？
通常，如果Child 组件的渲染成本很低，这无关紧要。但是，在我的情况下，Child 组件需要很长时间才能挂载，所以每次Parent 组件更改时我都无法重新挂载。
您可以将
parentA或parentB字符串作为道具传递给通用父组件。
const App = () => {
const [a, setA] = useState(true)
return (
<div>
<button onClick={() => setA(!a)}>Toggle ParentA/B</button>
<ParentGeneric content={a? 'parentA': 'parentB'}><Child /></ParentGeneric>
</div>
)
}
const ParentGeneric = ({children, content}) => <div>{content}{children}</div>
class Child extends React.Component {
...
}
这会奏效。不幸的是，这将我的Parent 组件的 JSX 结构限制为相同。换句话说，如果我的ParentA和ParentB的JSX结构不同，那我不知道如何将差异作为props传递。
例如：
const ParentA = ({ children }) => <div><div><h1>parentA{children}</h1></div></div>
const ParentB = ({ children }) => <div>parentB{children}</div>
如果这样定义parentA和parentB，是否仍然可以将这两个组件抽象为ParentGeneric组件，并简单地将ParentA和ParentB之间的结构差异作为props传递？
【问题讨论】：
-
给子组件一个静态key prop？
-
@rrd 你的意思是
<div key="child">child</div>？我试过了，但没有用。 -
看起来像一个 a/b 问题。如果您的子组件需要很长时间才能安装，那么您可能需要修复一些问题。也许使用 react.Context 将昂贵的瓶颈逻辑在组件树中向上移动。
标签： javascript reactjs