React性能优化 渲染20000多条checkbox组件，点击选择checkbox组件的时候特别卡，解决办法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/88569291

import * as React from 'react';
interface IData {
  id: number,
  title: string
}
interface IState {
  checkedValues: Set<IData>;
  data: IData[];
}

interface IProps {
  value: IData,
  checked: boolean,
  onChange: (v: IData) => void
}
class ItemComp extends React.Component<IProps> {
  shouldComponentUpdate(nextProps: IProps) {
    const props = this.props;
    return props.value !== nextProps.value || props.checked !== nextProps.checked
  }
  render() {
    const { value, checked } = this.props;
    return (
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={this.onChange} />
        {value.title}
      </label>
    )
  }
  onChange = () => {
    this.props.onChange(this.props.value);
  }
}

// tslint:disable-next-line:max-classes-per-file
export default class App extends React.Component<{}, IState> {
  constructor(props: {}) {
    super(props)
    const initValue: IState = {
      checkedValues: new Set(),
      data: []
    }
    for (let i = 0; i < 20000; i++) {
      let temp = { id: Math.random(), title: i }
      initValue.data.push(temp)
      initValue.checkedValues.add(temp)
    }
    this.state = initValue;
  }
  render() {
    const onChange = this.onChange;
    const { checkedValues, data } = this.state;
    return (
      <div className="App">
        {data.map((value) =>
          <ItemComp
            key={value.id}
            value={value}
            checked={checkedValues.has(value)}
            onChange={onChange} />
        )}
      </div>
    );
  }
  onChange = (active: IData) => {
    const checkedValues = new Set(this.state.checkedValues);
    if (checkedValues.has(active)) {
      checkedValues.delete(active);
    } else {
      checkedValues.add(active);
    }
    this.setState({ checkedValues })
    console.log(checkedValues)
  }
}

比较慢的代码案例：

import React, { Component } from 'react';
import { Checkbox } from 'antd'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: []
    }      
  }
  render() {
    let list = this.list()
    return (
      <div>
        {list}
      </div>
    );
  }
}

Object.assign(App.prototype, {
  componentDidMount() {
    let arr = []
    for (let i = 0; i < 20000; i++) {
      arr.push(i)
    }   
    this.setState({
     checked: arr
    }) 
  },
  list() {
    let { checked } = this.state
    let arr = []
    for (let i = 0; i < 20000; i++) {
      arr.push(<Checkbox key={i} checked={checked.indexOf(i) >= 0}  onChange={this.handleChange.bind(this, i)}>{i}</Checkbox>)
    }
    return arr
  },
  handleChange(index, e) {
    let { checked } = this.state
    let tempIndex = checked.indexOf(index)
    if (e.target.checked) {
     if (tempIndex < 0) {
       checked.push(index)
     }     
    } else {
     if (tempIndex >= 0) {
       checked.splice(tempIndex, 1)
     }         
    }

    this.setState({
     checked: checked
    })
    console.log(checked)
  }
})


export default App