通过计算量大的渲染功能提高组件的性能

Question

考虑以下组件：

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dataArr: props.dataArr };
  }

  render() {
    return (
      <div>
        {this.createTextFields()}
      </div>
    );
  }

  createTextFields = () => this.state.dataArr.map((data, index) =>
    <TextField 
      key={index}
      value={data}
      onChange={newData => this.handleTextFieldChange(index, newData)}
    />;

  handleTextFieldChange = (index, newData) => {
    const newDataArr = this.state.dataArr.splice();
    newDataArr[index] = newData;
    this.setState({ dataArr: newDataArr });
  }
}

每当你在任何文本字段中写入时，状态dataArr被替换（不变异），调用render方法，我们遍历并映射数组中的所有元素。如果dataArr非常大并且我们写得非常快（按住一个键），这是一个计算量很大的操作，导致口吃，滞后和有时完全锁定。

这就是我总是编写从道具创建自己内容的组件，直到最近我才发现它的缺陷。是否有其他方法可以做到这一点，我错过了一些设计模式，或者“hacks”可以改善这些组件的性能？