测试记录

[xinglie]

import React from 'react';
import "./styles.css";
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true,list:[]};
    for(let i=0;i<10000;i++){
      this.state.list.push(i);
    }
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    this.delete=this.handleDelete.bind(this);
    this.test=this.handleTest.bind(this);
    }
  handleTest(i){
    console.log(i,this.state.list);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  handleDelete(){
    this.setState({
      list:[]
    });

    console.log(this.state.list,document.getElementById('ulList').children.length);

    window.requestAnimationFrame(()=>{
      console.log(this.state.list,document.getElementById('ulList').children.length);
    });
  }

  render() {
    return (<>
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
      <ul id="ulList">
        {
          this.state.list.map((e,i)=>{
            return (<li onClick={this.test.bind(null,i)}>{e}</li>)
          })
        }
        </ul>

        <button onClick={this.delete}>delete</button>
        </>
    );
  }
}