如何改善React Redux性能

Question

我有一个具有许多行（50-100）的组件。有能力编辑线路并键入文本。所有行都存储在Redux Store中。我在每个按键上更新商店，并且在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}
      />
    )
  })
 }
}

如何重构此代码？

Answer 1

在处理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>
    )
  }
}

希望这会有所帮助。

Answer 2

您的性能问题很可能与redux无关，而是要对其进行反应。

这是因为每当您更新全局对象时，所有行都会重新渲染。您应该仅重新渲染用户更新的行。

您可以使用showscomponentupdate方法控制组件渲染。

例如，您只需要在组件发生更改时更新组件。