React Native中如何向函数引用传递变量？

这个问题确实是React Native优化大型列表时的常见痛点——既要避免在render阶段创建大量新函数导致性能损耗，又要能正确传递列表项的变量。我给你分享几个实用的解决方案，按推荐程度排序：

方案一：拆分独立子组件 + React.memo 优化 #

这是最推荐的方案，既保证性能，又让代码结构更清晰，符合React组件拆分的最佳实践。

核心思路是把每个列表项抽成单独的子组件，将需要的列表项数据（item）和父组件的回调函数作为props传入。然后用React.memo包裹子组件，它会浅比较props的变化，只有当props真正改变时才会重新渲染子组件，避免父组件每次render都触发所有子组件的重渲染。

示例代码：

// 独立的列表项子组件
const ListItem = React.memo(({ item, onItemPress }) => {
  return (
    <TouchableOpacity onPress={() => onItemPress(item.id)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );
});

// 父组件中的FlatList使用
class ParentComponent extends React.Component {
  // 父组件的回调函数，接收子组件传递的变量
  handleItemPress = (itemId) => {
    console.log(`点击了ID为${itemId}的列表项`);
    // 这里处理你的业务逻辑
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem item={item} onItemPress={this.handleItemPress} />
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  }
}

为什么有效？

• React.memo确保子组件只有在item或onItemPress变化时才重新渲染，避免了不必要的渲染开销。
• 子组件内部的箭头函数只会在子组件渲染时创建，但子组件的渲染频率被React.memo严格控制，不会像直接在父组件renderItem里写箭头函数那样每次都创建新函数。

方案二：通过事件源获取变量（适合简单场景） #

如果你不想拆分组件，可以利用React Native元素的属性，把需要传递的变量绑定到元素上，然后在回调函数中通过事件对象获取。这种方法不需要创建新函数，但可读性稍差，适合只传递单个标识（比如ID）的场景。

示例代码：

class ParentComponent extends React.Component {
  handleItemPress = (event) => {
    // 从事件源获取绑定的item ID
    const itemId = event.currentTarget.testID;
    console.log(`点击了ID为${itemId}的列表项`);
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <TouchableOpacity 
            onPress={this.handleItemPress}
            testID={item.id.toString()} // 将item ID绑定到testID属性
          >
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  }
}

注意事项：

• 这里用了testID，你也可以用accessibilityLabel或者自定义属性（但自定义属性需要注意兼容性）。
• 如果需要传递多个变量，这种方法会比较繁琐，不如方案一直观。

方案三：提前生成绑定好参数的函数映射表（适合数据稳定的场景） #

如果你的列表数据不频繁更新，可以提前在组件初始化或数据更新时，为每个列表项生成绑定好参数的函数，存在一个对象里，然后在renderItem中直接引用对应的函数。这样不会在render阶段创建新函数，性能友好，但需要手动维护函数映射表。

示例代码：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.itemPressHandlers = {}; // 存储每个item的绑定函数
  }

  componentDidMount() {
    // 初始化时生成函数映射表
    this.updateItemPressHandlers(this.state.data);
  }

  componentDidUpdate(prevProps, prevState) {
    // 当数据变化时，更新函数映射表
    if (prevState.data !== this.state.data) {
      this.updateItemPressHandlers(this.state.data);
    }
  }

  // 生成绑定好参数的函数
  updateItemPressHandlers = (data) => {
    this.itemPressHandlers = data.reduce((handlers, item) => {
      handlers[item.id] = () => this.handleItemPress(item.id);
      return handlers;
    }, {});
  };

  handleItemPress = (itemId) => {
    console.log(`点击了ID为${itemId}的列表项`);
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={this.itemPressHandlers[item.id]}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    );
  }
}

优缺点：

• 优点：完全避免了在render阶段创建新函数，性能最优。
• 缺点：需要手动维护函数映射表，当数据频繁变化时会增加代码复杂度。

总的来说，**方案一（拆分组件+React.memo）**是最平衡的选择，既保证了性能，又让代码结构清晰易维护，也是React官方推荐的优化方向。

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