Question

经常发生这样的情况，我必须渲染将组件作为属性的项目列表。例如，UI Kitten的组件（大多数组件）采用作为道具accessoryLeft和accessoryRight的函数传递的组件。但是，为了将source参数传递给Image组件以进行渲染，我必须传递一个render-time build函数，该函数在每次组件渲染时都会重新评估。

例如：

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的image属性永远不会改变，但是会向accessoryLeft传递一个新函数，并且每次都会重新渲染它，这会导致闪烁和缓慢的加载时间...

在这种情况下，key组件上的<Image />道具也无济于事，因为每次重新渲染时都会重建一个新功能。

将参数注入作为道具传递的JSX组件

0 个答案: