0
我試圖使用React實現語法熒光筆。高級組件本身的語法與Redux無關，但Redux仍然相關。反應加快渲染嵌套組件
熒光筆需要2個道具
structure - 這是一個二維數組與令牌的ID的被渲染，拆分到線，例如：
const structure = [
[ // a line
"ryMtafN9b",
"r1WftTfEcZ",
"rkfftaMV5W"
],
[ // another line
"B1sGYTG4cZ",
"By3MYpzEq-"
],
...
]
tokens - 令牌ID和令牌之間的映射，例如：
const tokens = {
"ryMtafN9b": {
"type": "LEFT_SQUARE_BRACKET",
"value": "[",
"id": "ryMtafN9b"
},
"r1WftTfEcZ": {
"type": "WHITESPACE",
"value": " ",
"id": "r1WftTfEcZ"
},
"rkfftaMV5W": {
"type": "LEFT_CURLY_BRACKET",
"value": "{",
"id": "rkfftaMV5W"
},
...
}
渲染接下來會發生這樣的（除去所有無關的東西）：
一個令牌
class TokenElement extends PureComponent {
render() {
// return a <span> based on the token type, etc
}
}
一行（線）
class TokenRow extends PureComponent {
render() {
const { tokens } = this.props
return (<div>
{tokens.map((token) => <TokenElement token={token} key={token.id} />)}
</div>)
}
}
實際突出顯示器組件
class JsonSyntaxHighlighter extends PureComponent {
render() {
const { tokens, structure } = this.props
return (<pre>
{
structure.map((line) => (<TokenRow tokens={line.map((tokenId) => tokens[tokenId])} />))
}
</pre>)
}
}
問題 的原因，我實現自定義的語法高亮顯示，是因爲我需要在令牌上添加自定義裝飾el基於進入異步的數據。這些更新以擴展tokens對象中的每個令牌的形式出現，沒有通過reducer進行突變（整個熒光筆組件由連接的智能組件呈現）。儘管所有的部件都是PureComponent■一個單一的令牌的重新渲染需要很長的時間，因爲：
JsonSyntaxHighlighter檢查是否需要更新 - YES（因爲tokens對象在它的道具改變）TokenRow檢查是否需要更新 - YES（因爲它是tokens陣列發生了改變，因爲它是一個平map的結果）TokenElement檢查是否需要更新MAY BE（因爲現在我可以正確地依靠shouldComponentUpdate）。
現在，當很多小的更新以相對較小的時間間隔到達時，由於大量重新呈現排隊，UI僅會阻塞。
問題 我可以構建我的數據或我的部件越好，這樣在個人令牌的狀態頻繁變化可以觸發呈現速度快，無需檢查整個樹？
也許React v16是你想看的東西，因爲它們引入了優先級。 https://www.youtube.com/watch?v=ZCuYPiUIONs – Vivian
當然！我安裝了rc，但是他們還沒有異步渲染:( –