React加快了嵌套组件的渲染速度

Question

I'm trying to implement a syntax highlighter using React. The syntax highligher component itself is Redux independent, but Redux is still relevant.

The highlighter takes 2 props

structure - It's a 2d array with the id's of tokens to be rendered, split to lines, example:

const structure = [
  [ // a line
    "ryMtafN9b",
    "r1WftTfEcZ",
    "rkfftaMV5W"
  ],
  [ // another line
    "B1sGYTG4cZ",
    "By3MYpzEq-"
  ],
  ...
]

tokens - A mapping between token id and token, example:

const tokens = {
  "ryMtafN9b": {
    "type": "LEFT_SQUARE_BRACKET",
    "value": "[",
    "id": "ryMtafN9b"
  },
  "r1WftTfEcZ": {
    "type": "WHITESPACE",
    "value": "  ",
    "id": "r1WftTfEcZ"
  },
  "rkfftaMV5W": {
    "type": "LEFT_CURLY_BRACKET",
    "value": "{",
    "id": "rkfftaMV5W"
  },
  ...
}

The rendering then happens like this (removed all irrelevant stuff):

One token

class TokenElement extends PureComponent {
  render() {
    // return a <span> based on the token type, etc
  }
}

One row (line)

class TokenRow extends PureComponent {
  render() {
    const { tokens } = this.props
    return (<div>
      {tokens.map((token) => <TokenElement token={token} key={token.id} />)}
    </div>)
  }
}

The actual highlighter component

class JsonSyntaxHighlighter extends PureComponent {
  render() {
    const { tokens, structure } = this.props
    return (<pre>
      {
        structure.map((line) => (<TokenRow tokens={line.map((tokenId) => tokens[tokenId])} />))
      }
    </pre>)
  }
}

The problem The reason I'm implementing a custom syntax highlighter, is because I need to add custom decorations on token level based on data coming in async. These updates coming in the form of extending each token in the tokens object, without mutations through a reducer (The whole highlighter component is rendered by a connected smart component). Even though all the components are PureComponent s the re-rendering of one single token takes a long time since:

1. JsonSyntaxHighlighter checks if needs to update - YES (since the tokens object changed in it's props)
2. TokenRow checks if needs to update - YES (since it's tokens array has changed, because it's a result of a map ping)
3. TokenElement checks if needs to update MAYBE (since now I can rely on shouldComponentUpdate properly).

Now when a lot's of these small updates arrive in a relatively small interval, the UI just blocks since a tons of re-renders are queued up.

Question Can I structure my data or my components better, so that frequent changes in individual token's state can trigger renders fast, without checking the whole tree?

Answer 1

Facebook has a great article on exactly this topic.

Short answer is to use React's shouldComponentUpdate lifecycle method generously to specify when whole the component tree should avoid updating. Here are a few examples on how to do that.

Answer 2

I don't have proper code samples (it would be too much code to post here) but the way I ended up solving this is batching the plentiful store updates into chunks using Observable s ( rxjs , buffer operator). This made the reducer code a bit more complex since state merges were not so natural, but now I have complete control over how frequently the store updates happen, and this implies control over how frequently render s happen.