React.js（无JSX）修改HTML异常：Node.js服务器client.js变更不生效

咱们先定位问题根源——从你描述的情况来看，核心问题大概率出在服务器没有正确处理静态文件请求或者浏览器缓存，再加上可能的React代码挂载问题。我帮你一步步拆解解决方案：

1. 修复Server.js：让它能正确返回client.js文件 #

你当前的server.js只读取了client.html，但当浏览器请求client.js时，服务器根本不知道要返回这个文件！这就导致页面一直用的是旧的（甚至可能是不存在的）js文件。咱们修改一下server.js，让它能处理所有静态资源请求：

var http = require('http'),
    fs = require('fs'),
    path = require('path');

http.createServer(function (req, res) {
  // 处理根路径请求，默认返回client.html
  let filePath = '.' + req.url;
  if (filePath === './') {
    filePath = './client.html';
  }

  // 根据文件后缀设置正确的Content-Type
  const extname = path.extname(filePath);
  let contentType = 'text/html';
  switch (extname) {
    case '.js':
      contentType = 'text/javascript';
      break;
    case '.css':
      contentType = 'text/css';
      break;
    // 其他需要的类型可以继续添加
  }

  // 读取并返回文件
  fs.readFile(filePath, function(error, content) {
    if (error) {
      if(error.code === 'ENOENT'){
        // 文件不存在时返回404
        res.writeHead(404, { 'Content-Type': 'text/html' });
        res.end('<h1>404 Not Found</h1>', 'utf-8');
      } else {
        // 服务器内部错误
        res.writeHead(500);
        res.end('Server Error: ' + error.code);
      }
    } else {
      // 返回正确的文件内容和类型
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
}).listen(8000);

console.log('Server running at http://localhost:8000/');

2. 解决浏览器缓存问题 #

开发时浏览器经常会缓存静态文件，哪怕你改了client.js，它还是会加载旧版本。解决办法有两个：

• 临时方案：打开浏览器开发者工具（F12），切换到Network面板，勾选Disable cache选项，这样刷新页面就会加载最新的文件。
• 永久方案（开发环境）：在server.js返回文件时添加缓存控制头，强制浏览器不缓存：

// 替换之前的res.writeHead部分
res.writeHead(200, { 
  'Content-Type': contentType,
  'Cache-Control': 'no-cache, no-store, must-revalidate',
  'Pragma': 'no-cache',
  'Expires': '0'
});

3. 检查你的无JSX React代码是否正确 #

确保你的client.js代码是标准的无JSX写法，并且正确挂载到DOM上。举个正确的例子：

首先，client.html里要先引入React和ReactDOM的脚本（如果没有本地安装的话）：

<!DOCTYPE html>
<html>
<head>
  <title>React No JSX</title>
  <!-- 引入React开发版本 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
  <!-- React挂载的根节点 -->
  <div id="root"></div>
  <script src="client.js"></script>
</body>
</html>

然后client.js的代码要这样写：

// 无JSX的组件写法
function App() {
  return React.createElement('h1', null, 'Hello, Updated React Content!');
}

// 挂载到DOM上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

最后验证步骤 #

1. 重启你的server.js（node server.js）
2. 打开浏览器访问http://localhost:8000（或者直接访问client.html）
3. 修改client.js里的内容，刷新页面，就能看到更新后的效果了！

内容的提问来源于stack exchange，提问作者Obaid-ur-Rehman Ashfaq