如何提高反應性能？

我有一個組件有很多行（50-100）的表。有能力編輯線條並輸入文字。所有行均存儲在redux存儲中。我在每個按鍵上更新商店，並且在輸入文字出現在textarea之前大約需要1-1.5秒。每一行都是一個獨立的組件。如何提高反應性能？

的結構大致是波紋管（但當然這要複雜得多）

@connect(store => { 
    return { 
    phrases: store.phrases 
    }; 
}) 

export default class TableContainer extends React.Component { 
handlePhraseUpdate = value => { 
    // update redux store here 
}; 

render() { 
    return this.props.phrases.map((phrase, index) => { 
    return (
     <Phrase 
     phrase={phrase} 
     onPhraseUpdate={this.handlePhraseUpdate} 
     /> 
    ) 
    }) 
} 
}

我如何重構這個代碼？

來源

2017-09-12 AlexWasHere

您可以將當前值保存在組件的狀態中，並僅在提交時使用最終結果更新redux。 – Daniel

@丹尼爾是的我試圖這樣做，它變得更好，但我有另一個更新短語時，他們在商店中更改，而不是直接在組件中的問題。這是我開始使用全球商店的唯一原因 – AlexWasHere

在處理Redux中的大集合時，最好將代碼分解，以便在集合中的項目發生更改時重新呈現最少的組件。

在您當前的實施中，當更新Phrase時，TableContainer會收到全新的一組短語，並將重新呈現所有短語，即使只有一個已更改。

通過連接Phrase組件並查看每個單詞的單個短語將導致更新短語時單行更新。

這是最好的價值使用某種類型的id，例如：

@connect((store, ownProps) => { 
    return { 
     phrase: store.phrases[ownProps.id] 
    } 
    }) 

export default class Phrase extends React.Component { 
    handlePhraseUpdate = value => { 
    // update redux store here 
    } 

    render() { 
    const { phrase } = this.props 
    // render phrase 
    } 
} 

@connect(store => { 
    return { 
    // this could also be stored rather than calculated each time 
    phrases: store.phrases.map(p => p.id) 
    }; 
}) 

export default class TableContainer extends React.Component { 
    render() { 

    return this.props.phrases.map((id) => { 
     return (
     <Phrase key={id} id={id} /> 
    ); 
    }); 
    } 
}

如果你沒有一個id您可以使用索引數組中：

@connect((store, ownProps) => { 
    return { 
     phrase: store.phrases[ownProps.index] 
    } 
    }) 

export default class Phrase extends React.Component { 
    handlePhraseUpdate = value => { 
    // update redux store here 
    } 

    render() { 
    const { phrase } = this.props 
    // render phrase 
    } 
} 

@connect(store => { 
    return { 
    phraseCount: store.phrases.length 
    }; 
}) 

export default class TableContainer extends React.Component { 
    render() { 
    const phrases = [] 
    let index = 0 

    for (let index = 0; index < this.props.phraseCount; index++) { 
     phrases.push(<Phrase key={index} index={index} />) 
    } 

    return (
     <div> 
     { phrases } 
     </div> 
    ) 
    } 
}

希望這會有所幫助。

來源

2017-09-12 11:30:49

您的性能問題很可能與redux無關，而與ReactJS本身無關。

這是因爲每當更新全局對象時，所有行都會重新呈現。您應該只重新渲染用戶正在更新的行。

您可以使用shouldComponentUpdate方法控制組件渲染。

例如，只有在組件的內部狀態已更改時纔想更新該組件。

來源

2017-09-12 11:37:19

如何提高反應性能？

回答

相關問題