反应加快渲染嵌套组件

Question

我试图使用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■一个单一的令牌的重新渲染需要很长的时间，因为：

1. JsonSyntaxHighlighter检查是否需要更新 - YES（因为tokens对象在它的道具改变）
2. TokenRow检查是否需要更新 - YES（因为它是tokens阵列发生了改变，因为它是一个平map的结果）
3. TokenElement检查是否需要更新MAY BE（因为现在我可以正确地依靠shouldComponentUpdate）。

现在，当很多小的更新以相对较小的时间间隔到达时，由于大量重新呈现排队，UI仅会阻塞。

问题 我可以构建我的数据或我的部件越好，这样在个人令牌的状态频繁变化可以触发呈现速度快，无需检查整个树？

Answer 1

我没有适当的代码样本（这将是太多的代码张贴在这里），但我最终解决，这是配料丰满商店更新到使用Observable S（rxjs，buffer运营商）块的方式。这使得reducer代码有点复杂，因为状态合并并不那么自然，但现在我完全控制了商店更新的频率，这意味着控制发生的频率。

Answer 2

Facebook has a great article on exactly this topic.

简短的回答是使用慷慨地作出反应的shouldComponentUpdate生命周期的方法来指定全当组件树应避免更新。Here are a few examples on how to do that.