React开发中如何将子组件的员工ID状态传递给父组件

问题根源 #

• 首次实现卡顿：你将IdScreen组件直接嵌套定义在App组件内部，每次父组件App的id状态更新触发重渲染时，都会重新生成IdScreen的组件实例，相当于输入组件被销毁后重建，所以输入时会卡顿。
• 二次修改后父组件拿不到值：你将id状态移到了子组件内部成为私有状态，父组件没有直接访问子组件内部状态的权限。

解决方法 #

1. 把IdScreen组件移到App组件外部定义，避免嵌套声明导致的重复实例化
2. 父组件通过props向子组件传递状态更新回调，子组件输入时触发回调将值同步给父组件
3. 可配合React.memo包裹子组件，减少不必要的重渲染，进一步提升输入流畅度

完整实现代码 #

import React, { useState, memo } from 'react';
import {
  Container,
  Header,
  Title,
  Body,
  Content,
  Item,
  Input,
  Icon,
  Text,
  View,
} from 'native-base';

// 子组件移到外部定义，用memo包裹优化重渲染
const IdScreen = memo(({ id, onIdChange }) => {
  return (
    <View>
      <Text>Enter your Employee ID</Text>
      <Item rounded style={styles.textBox}>
        <Icon type='Ionicons' name='person' style={{ fontSize: 30 }} />
        <Input
          onChangeText={(text) => {
            // 调用父组件传入的回调同步值
            onIdChange(text);
          }}
          value={id}
        />
      </Item>
    </View>
  );
});

export default function App() {
  const [id, setId] = useState('');

  return (
    <Container>
      <Header>
        <Body>
          <Title>Employee Enroll</Title>
        </Body>
      </Header>
      <Content>
        {/* 向子组件传递当前id值和更新回调 */}
        <IdScreen id={id} onIdChange={setId} />
      </Content>
    </Container>
  );
}

修改后父组件的id状态会和子组件输入框内容实时同步，既解决了输入卡顿问题，父组件也能直接拿到id值供后续调用API使用。

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