componentWillUnmount和Web3

时间:2019-12-26 07:05:54

标签: javascript reactjs web3

我有一个巨大的componentDidMount web3应用程序负载。好吧,无论如何对我来说是一个很大的。在页面导航或组件上没有卸载,我想让此动画在后台运行。我可以卸载什么,不能卸载什么?

componentDidMount() {
      this._isMounted = true;
      if (isBrowser) {
        this.setState({dependentOnView: "huge"})
    } else {
      this.setState({dependentOnView: "tiny"});
    } 
      if (this._isMounted){
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, this.state.width / this.state.height, 1, 1000);
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setSize(this.state.width, this.state.height);
      this.mount.appendChild(this.renderer.domElement);
      this.initializeCamera();
      this.cube = new THREE.Object3D();
      const geometry2 = new THREE.IcosahedronGeometry(7, 1);
      const material2 = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        shading: THREE.FlatShading
      });



      var planet = new THREE.Mesh(geometry2, material2);
      planet.scale.x = planet.scale.y = planet.scale.z = 16;
      this.cube.add(planet);

      this.ambientLight = new THREE.AmbientLight(0x05032B);
      this.lights = [];
      this.lights[0] = new THREE.DirectionalLight( 0x47c465, 3 );
      this.lights[0].position.set( 1, 0, 0 );
      this.lights[1] = new THREE.DirectionalLight( 0x05032B, 4 );
      this.lights[1].position.set( 0.75, 1, 0.5 );
      this.lights[2] = new THREE.DirectionalLight( 0x00deff, 1 );
      this.lights[2].position.set( -0.75, -1, 0.5 );

      this.scene.add( this.cube, this.ambientLight, 
        this.lights[0],
        this.lights[1],
        this.lights[2]  );
      this.animate();
      }
      window.addEventListener("load", this.revisitTimeline());
      //window.addEventListener("resize", this.onWindowResize());
    }

有问题的渲染

renderViewFunction() {
  if (this._isMounted) {
  return (
    <div as="ui segment" className="centeredSpace"
width={this.state.width}
height={this.state.height}
ref={this.mount}></div>
      );
}
}

和componentdidunmount

componentWillUnmount() {
        //this.onWindowResize = this.onWindowResize.bind(this);
        window.removeEventListener("load", this.revisitTimeline());
        clearInterval(
        this.state.width,
        this.state.height,
        this.state.dependentOnView
        );
        this._isMounted = false;

      }

0 个答案:

没有答案