Question

我有一个包含许多行（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}
      />
    )
  })
 }
}

如何重构此代码？

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无关，而与ReactJS本身无关。

这是因为无论何时更新全局对象，都会重新呈现所有行。您应该只重新渲染用户正在更新的行。

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

例如，只有在内部状态发生变化时才想更新组件。

如何提高反应还原性能？

2 个答案: