加快React Component渲染

Question

我有一个反应组件，可以很好地渲染，但是一旦我添加图像，它的渲染速度就会大大降低，并导致组件渲染延迟几百毫秒。有谁知道加快速度的方法，或者我做错了什么？

class SearchResults extends React.Component {
render() {
    //Individual container styling
    const divStyle = {
        float: 'left',
        width: '80px',
        height: '80px',
        border: '5px solid pink',
        borderRadius: '3px',
        margin: '2px',
        cursor: 'pointer',
        backgroundColor: 'white'
    };

    const styleImage = {
        maxWidth: '70px',
        maxHeight: '70px',
        margin: 'auto',
        display: 'flex'
    }

    //Individual record
    const startItem = (this.props.itemsPerPage * this.props.page) - this.props.itemsPerPage;//First item on page
    const endItem = startItem + this.props.itemsPerPage;
    //Slice is from/to 
    const all = searchableDatabase.slice(startItem, endItem).map((value, index) => {
        return (
            <div style={divStyle} >
                {value.edit_title_normal}
                {/*<img style={styleImage} src={'YourMemories/' + currentCollection.id + '/' + value.sequentialNumber + '/' + value.sequentialNumber + ' Thumbnail.jpg'} />*/}
            </div>
        )
    });

    //Main container
    return (
        <div>
            <div style={{ clear: 'both', paddingTop: '20px', paddingBottom: '20px', textAlign: 'center' }}>
                <Pagination allLength={searchableDatabase.length} page={this.props.page} itemsPerPage={this.props.itemsPerPage} />
            </div>
            <div>
                {all}
            </div>
        </div>
    );
}

}