Javascript 传递ReactElement和返回ReactElement的函数之间的区别

将

ReactElement

作为属性传递有什么区别：

我发现生命周期中存在差异：

• 每当父react元素更新时，将对第二种情况执行

  计数器的装载循环：

• 此外，第二种情况在每次父组件渲染时都会丢失其状态

---

我看不出他们之间有什么区别。为什么第一种情况下它能够保持其状态？

这其实很简单，这里真正的问题是渲染本身的时间安排

让我们从第二种情况开始，这实际上是一种称为Render Props的设计模式，您可以在此处阅读： 在本例中，prop包含一个返回React元素的函数，这意味着只有在调用该函数时才会对其求值，因此它并不总是像第一种情况那样“活动”

---

第一种情况：将道具绑定到元素时，会在创建父元素时对其进行计算。这意味着只要父元素处于“活动”状态，prop元素就会处于活动状态。

第一个示例将静态JSX元素

作为

RenderParam

prop传递。第二个示例使用函数

instantiatedCounter

，该函数允许返回更动态的JSX元素，通常称为

在第二种情况下，您将丢失状态，因为React每次都将

ReactElement

prop视为新定义的组件，卸载旧组件并在每个渲染周期中再次装载它。您要做的是调用

ReactElement

prop来检索JSX元素作为返回值：

function RenderParam({ ReactElement }) {
  return <div>{ReactElement()}</div>; 
  // not: return <div><ReactElement /></div>
}

const instantiatedCounter = () => <Counter />; 

<RenderParam ReactElement={instantiatedCounter} />

function RenderParam({ ReactElement }) {
  return <div> <ReactElement /> </div> 
}

ReactElement changed (at RenderParam lifecycle)
component did mount (at Counter)

function RenderParam({ ReactElement }) {
  return <div>{ReactElement()}</div>; 
  // not: return <div><ReactElement /></div>
}

const instantiatedCounter = () => <Counter />; 
// make it static in some way, so object reference doesn't change

export default function App() {
  // .. and remove instantiatedCounter here
  return <RenderParam ReactElement={instantiatedCounter} />
}