Внедрить параметры в компоненты JSX, переданные как реквизиты - PullRequest
Новая
       23

Внедрить параметры в компоненты JSX, переданные как реквизиты

1 голос
/ 18 июня 2020

Часто бывает, что мне нужно визуализировать список элементов, которые принимают компонент как свойство. Например, компоненты UI Kitten (большинство из них) принимают компоненты, переданные как функции для свойств accessoryLeft и accessoryRight. Однако, чтобы передать параметр источника в компонент Image для рендеринга для них, я должен передать встроенную функцию времени рендеринга, которая переоценивается каждый раз при рендеринге компонента.

Например: 

function renderItem({ item, index, separators }){
    return <ListItem
        title={item.name}
        description={item.descriptions}

        // this function
        accessoryLeft={(imageProps) => {
            return <Image source={{ uri: item.image }} />;
        }}
    />;
}

function keyExtractor(item){ return `${item.id}`; }

function SomeList(props){
    return <List
        data={props.itemsList}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
    />;
}

Можно ли как-то это оптимизировать? Свойство изображения renderedItem никогда не изменяется, но в accessoryLeft передается новая функция, и она каждый раз повторно обрабатывается, что вызывает мерцание и медленную загрузку ...

Кроме того, в этом случае опора key в компоненте <Image /> не помогает, потому что новая функция перестраивается при каждом повторном рендеринге.

...