React中Ref回调、this.mount用法及Three.js与React结合实现问询

Hey there! Let's break down your questions about React refs, this.mount, and that Three.js + React example step by step— I’ve got you covered.

First off, let's clarify what these two pieces do in the example:

• Ref回调的作用:
  React ref callbacks are a flexible way to grab a reference to a real DOM node rendered by your component. Unlike older string refs, callback refs give you direct access to the DOM element as soon as it mounts, which is perfect for cases where you need to interact with the DOM directly (like attaching a Three.js renderer).

• this.mount的角色:
  this.mount is a property we attach to the component instance to store the DOM node from the ref callback. In the render method, you’ll see something like:

  <div ref={ref => (this.mount = ref)} />
  

  When the component mounts, the ref callback runs, assigns the DOM div to this.mount, and now we can access that div anywhere in the component (like in componentDidMount to get its width/height).

• Why use a callback ref here?:
  For class components, callback refs are a reliable, straightforward way to get DOM references immediately after mount. They avoid the potential delays or edge cases you might run into with createRef (though createRef works too— this is just a common older pattern you’ll see in examples).

Let’s start with the full, completed version of the example (since your snippet cut off) and break down how it works:

import React, { Component } from 'react'
import * as THREE from 'three'

class Scene extends Component {
  constructor(props) {
    super(props)
    // Bind methods to ensure `this` points to the component instance
    this.start = this.start.bind(this)
    this.stop = this.stop.bind(this)
    this.animate = this.animate.bind(this)
  }

  componentDidMount() {
    // Get the dimensions of our React DOM container
    const width = this.mount.clientWidth
    const height = this.mount.clientHeight

    // 1. Initialize Three.js core elements
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer({ antialias: true })

    // 2. Configure renderer and camera
    renderer.setClearColor('#000000')
    renderer.setSize(width, height)
    camera.position.z = 5 // Move camera back so we can see the cube

    // 3. Create a 3D object and add it to the scene
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: '#433F81' })
    const cube = new THREE.Mesh(geometry, material)
    scene.add(cube)

    // 4. Attach Three.js renderer's canvas to our React DOM node
    this.mount.appendChild(this.renderer.domElement)

    // Store references to Three.js objects on the component instance
    this.scene = scene
    this.camera = camera
    this.renderer = renderer
    this.cube = cube

    // Start the animation loop
    this.start()
  }

  componentWillUnmount() {
    // Clean up resources to prevent memory leaks
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

  start() {
    // Use requestAnimationFrame for smooth browser-based animation
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  stop() {
    // Cancel the animation frame to stop the loop
    cancelAnimationFrame(this.frameId)
  }

  animate() {
    // Update the cube's rotation every frame
    this.cube.rotation.x += 0.01
    this.cube.rotation.y += 0.01

    // Render the updated scene
    this.renderScene()

    // Keep the animation loop going
    this.frameId = requestAnimationFrame(this.animate)
  }

  renderScene() {
    this.renderer.render(this.scene, this.camera)
  }

  render() {
    return (
      <div
        ref={ref => (this.mount = ref)}
        style={{ width: '400px', height: '400px' }}
      />
    )
  }
}

export default Scene

Now let’s break down the key implementation pieces:

• Lifecycle Integration:

  • componentDidMount: This is the ideal spot to initialize Three.js because the React DOM is fully mounted, so this.mount is available. We set up the scene, camera, renderer, and 3D object here, then attach the renderer’s canvas to our React div.
  • componentWillUnmount: Critical for cleanup— we stop the animation loop and remove the renderer’s canvas from the DOM to avoid memory leaks.

• Animation Loop:

  • start/stop: We use requestAnimationFrame (a browser API for smooth, efficient animations) to run the animate method. Storing the frameId lets us cancel the loop when the component unmounts.
  • animate: This method runs every frame, updates the cube’s rotation, renders the scene, and schedules the next frame— creating a continuous animation.

• State Management for Three.js Objects:
  We store references to scene, camera, renderer, and cube on this so we can access and update them across different component methods (like animate or if we added a resize handler later).

• DOM Integration:
  By appending this.renderer.domElement (the canvas element Three.js creates) to this.mount, we seamlessly embed the Three.js scene into our React app’s DOM structure.

• Method Binding: We bind start, stop, and animate in the constructor to make sure this inside those methods refers to the component instance (otherwise, this would be undefined when the methods are called by requestAnimationFrame).
• Responsive Scenes: To make the Three.js scene resize with its container, add a window resize event listener in componentDidMount that updates the camera’s aspect ratio and renderer size, then calls camera.updateProjectionMatrix().
• Performance: For complex scenes, avoid heavy computations in the animate method, and consider using React’s memoization tools (like PureComponent) to prevent unnecessary re-renders of the Scene component.

内容的提问来源于stack exchange，提问作者Joey Gough