zoukankan      html  css  js  c++  java
  • React性能优化 渲染20000多条checkbox组件,点击选择checkbox组件的时候特别卡,解决办法

    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
  • 相关阅读:
    C++ 如何重复利用一个内存地址块
    C与C++在const用法上的区别
    C++ 与设计模式学习(其一)
    C/C++ 关于生成静态库(lib)/动态库(dll)文件如何使用(基于windows基础篇)
    c/c++----网站及其后门(CGI应用程序)
    C/C++深度copy和浅copy
    C/C++ 一段代码区分数组指针|指针数组|函数指针|函数指针数组
    C/C++ 如何劫持别人家的命令||函数||程序(只能对于window而言)
    C++继承与派生(原理归纳)
    Linux下如何查看自己的服务器有没有无线网卡
  • 原文地址:https://www.cnblogs.com/xutongbao/p/11915712.html
Copyright © 2011-2022 走看看