JavascriptのDOM要素をReactに変換する

Question

React.jsを使用して練習していて、オンラインで見つけたクールなjavascriptキャンバスアニメーションを再利用可能なコンポーネントに変換しようとしています。私は<canvas>をtrippyラインのアニメーションプラットフォームに変換する以下のコードを見つけました。あなたの心が吹き持つように準備します

var canvas = document.getElementById("canvas"); 
 
canvas.width = window.innerWidth; 
 
canvas.height = window.innerHeight; 
 
var ctx = canvas.getContext("2d"); 
 

 
var TAU = 2 * Math.PI; 
 

 
times = []; 
 
function loop() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    update(); 
 
    draw(); 
 
    requestAnimationFrame(loop); 
 
} 
 

 
function Ball (startX, startY, startVelX, startVelY) { 
 
    this.x = startX || Math.random() * canvas.width; 
 
    this.y = startY || Math.random() * canvas.height; 
 
    this.vel = { 
 
    x: startVelX || Math.random() * 2 - 1, 
 
    y: startVelY || Math.random() * 2 - 1 
 
    }; 
 
    this.update = function(canvas) { 
 
    if (this.x > canvas.width + 50 || this.x < -50) { 
 
     this.vel.x = -this.vel.x; 
 
    } 
 
    if (this.y > canvas.height + 50 || this.y < -50) { 
 
     this.vel.y = -this.vel.y; 
 
    } 
 
    this.x += this.vel.x; 
 
    this.y += this.vel.y; 
 
    }; 
 
    this.draw = function(ctx, can) { 
 
    ctx.beginPath(); 
 
    ctx.globalAlpha = .4; 
 
    ctx.fillStyle = '#448fda'; 
 
    ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false); 
 
    ctx.fill(); 
 
    } 
 
} 
 

 
var balls = []; 
 
for (var i = 0; i < canvas.width * canvas.height/(65*65); i++) { 
 
    balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height)); 
 
} 
 

 
var lastTime = Date.now(); 
 
function update() { 
 
    var diff = Date.now() - lastTime; 
 
    for (var frame = 0; frame * 16.6667 < diff; frame++) { 
 
    for (var index = 0; index < balls.length; index++) { 
 
     balls[index].update(canvas); 
 
    } 
 
    } 
 
    lastTime = Date.now(); 
 
} 
 
var mouseX = -1e9, mouseY = -1e9; 
 
document.addEventListener('mousemove', function(event) { 
 
    mouseX = event.clientX; 
 
    mouseY = event.clientY; 
 
}); 
 

 
function distMouse(ball) { 
 
    return Math.hypot(ball.x - mouseX, ball.y - mouseY); 
 
} 
 

 
function draw() { 
 
    ctx.globalAlpha=1; 
 
    ctx.fillStyle = '#001c33'; 
 
    ctx.fillRect(0,0,canvas.width, canvas.height); 
 
    for (var index = 0; index < balls.length; index++) { 
 
    var ball = balls[index]; 
 
    ball.draw(ctx, canvas); 
 
    ctx.beginPath(); 
 
    for (var index2 = balls.length - 1; index2 > index; index2 += -1) { 
 
     var ball2 = balls[index2]; 
 
     var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y); 
 
     if (dist < 100) { 
 
      ctx.strokeStyle = "#448fda"; 
 
      ctx.globalAlpha = 1 - (dist > 100 ? .8 : dist/150); 
 
      ctx.lineWidth = "2px"; 
 
      ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0); 
 
      ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0); 
 
     } 
 
    } 
 
    ctx.stroke(); 
 
    } 
 
} 
 

 
// Start 
 
loop();

<canvas id="canvas"></canvas>

あなたがそこに専門家を反応させるのすべて：あなたはキャンバスの動作を定義するのに最適な場所となり、再利用可能なコンポーネント、にこれを作るしようとした場合？私はそれをcomponentDidMount()に入れてください。その場合はrender()のキャンバスをref={(el) => this.canvas = el;}に初期化して実際のキャンバスを参照する必要がありますか？

ありがとうございます！

Answer 1

このcodepenは、機能からCanvasコンポーネントへの迅速かつ汚れたリアクション変換です。私はIDそのものを管理する機能を持っています。残りはあなたのデザインと論理に依存します。propsまたはstateからすべての物件を作ることができます。あなたが言うように、すべてがcomponentDidMountになるはずです。もちろん、コンポーネントをrefで更新することもできます。