NPM + React：更改 App.js 后不刷新答案

【问题标题】：NPM + React: Does not refresh after changes to App.jsNPM + React：更改 App.js 后不刷新
【发布时间】：2020-12-25 01:07:52
【问题描述】：

我理解从这个角度来看 react 应该“正常工作”：

npm create-react-app
npm run build

但是，我发现当我将WebGL 与 Three.js 一起使用时，我可能会对App.js 进行更改，并发现刷新页面并不会评估新的更改。

相反，我必须终止站点并重建。

是否存在与导致此问题的底层依赖关系相关的某些原因，或者这种意外行为是否值得投入时间来修复？

例如：

// Working App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class App extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    this.mount.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame( animate );
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render( scene, camera );
    };
    animate();
  }
  render() {
    return (
      <div ref={ref => (this.mount = ref)} />
    )
  }
}
export default App

如果我更改以下行：

var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

// to

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

我必须关闭站点并重建以观察颜色变化。

【问题讨论】：

标签： reactjs npm three.js

【解决方案1】：

如果您使用的是 Linux，您的项目将达到系统的文件观察器限制

要解决此问题，请在您的终端上尝试：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

【讨论】：