手动修改data.js中变量值后React为何重新渲染？

示例代码 #

data.js #

export const x = { value: 0 }

app.js #

import { x } from "./data";
function App() {
  return (
    <div>
      {console.log("Re-render")}
      {x.value}
    </div>
  );
}

export default App;

要搞清楚两个核心点：

1. const管的是变量引用，不是对象内容：const x = { value: 0 }里的const只是限制你不能把x重新赋值成别的对象，但对象内部的value属性本身是可以修改的。不过你这里不是运行时修改内存里的对象，是直接修改了源代码，这是完全不同的操作。
2. 开发环境的模块热更新机制：React开发环境（比如Create React App搭建的项目）会监听源代码的变化，当你修改data.js并保存后，工具链会自动重新编译这个模块，触发热模块替换——App组件会重新导入更新后的x对象，React检测到模块变化后就会触发组件重新渲染，所以你能看到控制台打印"Re-render"，页面也会显示新的x.value。

你之前以为值会保持0不变，应该是混淆了「运行时修改内存对象属性」和「修改源代码触发模块重载」的区别：前者如果不用React状态管理的话，组件不会自动更新，但后者是直接修改了代码本身，相当于重启了相关模块，组件自然会使用新的值重新渲染。

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