为什么不能在component属性中使用内联函数？状态丢失原理及实例详解

注意：component属性接受组件本身，而非渲染函数。请勿传递内联函数（例如 component={() => }），否则父组件重渲染时，你的组件会卸载再重新挂载，丢失所有状态。如需传递额外参数，请查看「Passing additional props」文档了解替代方案。

核心原理 #

这个警告常见于React Navigation这类路由库的Screen组件，底层逻辑和React的虚拟DOM Diff规则直接相关：

• 组件的component属性设计上是接收组件本身的引用，而非返回JSX的渲染函数。
• React判断是否需要复用现有组件实例的核心依据是：前后两次渲染时组件的类型引用是否完全相同。如果引用不同，React会直接卸载旧的组件实例，从头创建并挂载新的实例。
• 如果你给component传递内联函数，父组件每次重渲染都会生成一个全新的函数实例，两次渲染的component属性引用完全不同，必然会触发组件的卸载-重建流程。

结合你提供的代码举例：

function HomeScreen(props: Object) {
  return (
    <Navigator initialRouteName="Empty1">
      {/* 错误写法：每次HomeScreen重渲染，这里都会生成新的函数引用 */}
      <Screen
        name="Empty1"
        component={() => {
          return (
            <View>
              <Text>Example Text</Text>
            </View>
          );
        }}
      />
      {/* 正确写法：HomeScreen1是固定的组件引用，重渲染时不会变化 */}
      <Screen name="Home1" component={HomeScreen1} />
    </Navigator>
  );
}

上述代码里的Empty1路由对应的组件，只要HomeScreen触发重渲染，就会被卸载后重新挂载。

「丢失所有状态」具体指什么 #

这里的状态丢失是指组件卸载再挂载过程中，所有和原有实例绑定的临时状态全部被清空，具体包括：

• 组件内部通过useState、useReducer声明的所有状态重置为初始值，比如用户操作累加的计数、选中的选项等状态直接消失
• 输入框的输入内容、页面滚动位置、下拉框展开状态等用户交互产生的临时状态全部清空
• 已经执行的副作用会被清理，比如发起一半的请求被取消、订阅的事件被移除，挂载新实例后副作用会重新执行
• 如果是类组件，componentWillUnmount生命周期会触发，新实例挂载时会重新执行componentDidMount

你可以通过下面的修改版代码直观复现问题：

import { useState } from 'react'
import { Button, Text, View } from 'react-native'

function HomeScreen(props: Object) {
  // 父组件状态，修改会触发HomeScreen重渲染
  const [parentCount, setParentCount] = useState(0)
  return (
    <Navigator initialRouteName="Empty1">
      <Screen
        name="Empty1"
        component={() => {
          // 子组件内部状态，卸载重建后会重置为0
          const [childCount, setChildCount] = useState(0)
          return (
            <View>
              <Text>子组件计数：{childCount}</Text>
              <Button onPress={() => setChildCount(v => v + 1)} title="增加子组件计数" />
              <Text>父组件计数：{parentCount}</Text>
              <Button onPress={() => setParentCount(v => v + 1)} title="触发父组件重渲染" />
            </View>
          );
        }}
      />
    </Navigator>
  );
}

操作验证：先点击「增加子组件计数」把childCount加到3，再点击「触发父组件重渲染」，你会发现子组件的childCount直接重置为0，就是典型的状态丢失现象。

正确替代方案 #

如果需要给路由组件传递额外参数，不要用内联函数的写法，推荐两种方案：

1. 用路由库提供的initialParams传递参数

// 声明路由时传参
<Screen
  name="Empty1"
  component={EmptyComponent}
  initialParams={{ extraParam: '自定义参数' }}
/>

// 组件内通过props.route.params拿参数
function EmptyComponent(props) {
  const { extraParam } = props.route.params
  return <Text>{extraParam}</Text>
}

2. 用children写法自定义渲染

<Screen name="Empty1">
  {routeProps => <EmptyComponent {...routeProps} extraParam="自定义参数" />}
</Screen>

内容的提问来源于stack exchange，提问作者ozan kurucu