React Native如何全局复用数组？避免重复复制长数组

当然可以将这类静态数组存到单独的常量文件中复用，你遇到的重复渲染问题大概率是导出/使用方式不当导致的，以下是正确的实现方案：

1. 创建常量文件并导出静态数组 #

新建一个单独的常量文件（比如constants/USStates.js），直接定义并导出静态数组：

// constants/USStates.js
export const US_STATES = [
    { label: 'Alabama', value: 'AL' },
    { label: 'Alaska', value: 'AK' },
    { label: 'Arizona', value: 'AZ' },
    { label: 'Arkansas', value: 'AR' },
    { label: 'California', value: 'CA' },
    { label: 'Colorado', value: 'CO' },
    { label: 'Connecticut', value: 'CT' },
    { label: 'Delaware', value: 'DE' },
];

2. 在组件中正确导入并使用 #

直接导入常量数组，不要在组件内部每次渲染时重新创建数组引用（比如用扩展运算符复制、动态解构等），否则会导致react-native-element-dropdown的data prop每次都是新引用，触发不必要的重复渲染：

// 示例组件
import { useState } from 'react';
import { Dropdown } from 'react-native-element-dropdown';
import { US_STATES } from '../constants/USStates';

const StateSelector = () => {
    const [selectedState, setSelectedState] = useState(null);

    return (
        <Dropdown
            data={US_STATES}
            labelField="label"
            valueField="value"
            placeholder="Select a state"
            value={selectedState}
            onChange={item => setSelectedState(item.value)}
        />
    );
};

export default StateSelector;

3. 处理需要动态过滤的场景 #

如果需要对数组做过滤等动态操作，使用useMemo缓存结果，避免每次渲染重新生成数组：

import { useState, useMemo } from 'react';
import { Dropdown } from 'react-native-element-dropdown';
import { US_STATES } from '../constants/USStates';

const FilterableStateSelector = () => {
    const [searchText, setSearchText] = useState('');
    const [selectedState, setSelectedState] = useState(null);

    // 仅当searchText变化时重新计算过滤后的数组
    const filteredStates = useMemo(() => {
        return US_STATES.filter(state => 
            state.label.toLowerCase().includes(searchText.toLowerCase())
        );
    }, [searchText]);

    return (
        <>
            <TextInput
                value={searchText}
                onChangeText={setSearchText}
                placeholder="Search states"
            />
            <Dropdown
                data={filteredStates}
                labelField="label"
                valueField="value"
                placeholder="Select a state"
                value={selectedState}
                onChange={item => setSelectedState(item.value)}
            />
        </>
    );
};

export default FilterableStateSelector;

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