我有一个巨大的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;
}