在 React-Navigation 文档的入门中，他们说：
注意：component 属性接受组件，而不是渲染函数。不要传递内联函数（例如 component={() => }），否则当父组件重新渲染时，您的组件将卸载并重新安装丢失所有状态。请参阅传递其他道具以获取替代方案。
根据我的理解，如果我写的话：
const WrappedHome = () => <HomeScreen />;
以后用这个：
<Stack.Screen name='home' component={WrappedHome} />
这与他们的例子是等价的。 React 或 JSX 或 React-native 是否做了一些特殊的事情来导致 props 中的内联函数的评估与标准 Javascript 不同？还是我误会了什么？
【问题讨论】：
标签： javascript reactjs react-native react-navigation
组件不仅仅是一个常规函数。当你渲染一个组件时，它有一个“类型”——它是创建组件的函数：
例如：
function MyComponent() {
// whatever
}
<MyComponent /> // the component type is MyComponent
每当发生重新渲染时，React 都会查看此类型。如果相同，则保持组件的状态，并重新渲染。
现在假设您在第一次渲染期间渲染 MyComponent，但后来将其更改为 OtherComponent。 React 将卸载 MyComponent 并渲染 OtherComponent。 MyComponent 的所有本地状态在卸载时都会被销毁。
当您在另一个组件中内联创建组件时，每次渲染都会创建一个新函数，这意味着每次渲染都会创建一个新的组件类型。由于每次渲染都会改变类型，React 每次都会卸载之前的组件并安装新的组件，这是不可取的。
举个例子：
const a = { foo: 42 };
function getA() {
return a;
}
getA() === getA(); // the returned `a` is always the same because you defined the object outside `getA`
function getB() {
return { foo: 42 };
}
getB() !== getB(); // the returned object is a new one every time you call `getB` because you defined the object inside `getB`
所以并不是内联函数的评估方式不同，问题在于每次有一个新组件破坏任何本地状态时，即使您没有本地状态，卸载一个组件并安装一个新组件通常会更慢而不是更新相同的组件。
【讨论】：
function getA() {}，但它在函数内部，我仍然会在每次调用时得到一个新的getA，这相当于内联。每个函数调用都会给出一个新的getA，这会丢失状态等。谢谢。