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

Question

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

第一种情况

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

并传递一个返回ReactElement的函数：

第二种情况

const instantiatedCounter = () => <Counter />; 
<RenderParam ReactElement={instantiatedCounter} />
function RenderParam({ ReactElement }) {
return <div> <ReactElement /> </div> 
}

我看到生命周期存在差异：

• 每次父 react 元素更新时，都会针对第二种情况执行Counter的挂载周期：

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

• 此外，第二种情况在每次呈现父组件时都会失去其状态。

我看不出它们之间有什么区别。为什么首先它能够保持其状态？

Answer 1

第一个示例将静态 JSX 元素作为 prop 传递<Counter />RenderParam。第二个示例使用函数instantiatedCounter，它允许返回一个更动态的 JSX 元素，通常称为渲染道具。

在第二种情况下，你会失去状态，因为 React 每次都会将ReactElement道具视为新定义的组件，卸载旧的 prop 并在每个渲染周期中再次挂载它。您要做的是调用ReactElementprop 来检索 JSX 元素作为返回值：

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

您也可以使用 JSX 语法<div><ReactElement /></div>定义它。但要确保，instantiatedCounter是一个静态函数，而不是在每次渲染时重新创建，因此对象引用保持不变：

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} />
}

Answer 2

这其实很简单，这里真正的是渲染本身的时间。

让我们从第二种情况开始，这实际上是一种名为 Render Props 的设计模式，你可以在这里阅读它：https://reactjs.org/docs/render-props.html 在这种情况下，prop 包含一个返回 React 元素的函数，这意味着它只会在您调用该函数时才会被评估，因此它并不总是像您的第一种情况那样"活着"。

第一种情况：当你将 prop 绑定到 Element 时，它会在创建父元素时进行评估。 这意味着只要父元素"活着"，prop 元素就会处于活动状态。