Create React App组件修改后浏览器不自动重载问题及解决

我最近用create-react-app搭建了一个新项目，按照自己规划的目录结构写了几个无状态组件，结果遇到了头疼的问题：修改组件内容（比如把<PageHeader>里的文本从“This is a test!”改成别的）之后，浏览器完全不会自动重载展示变更，每次都得手动刷新页面才行。

折腾了好一阵才找到根源——Ubuntu系统默认的文件监视器数量太少了，大概只有8000左右，根本不足以监听项目里所有文件的变动，导致create-react-app的热重载机制失效。把这个数值调高到500000之后，问题立刻就解决了！

具体解决方案 #

1. 临时生效（重启系统后会重置） #

执行以下命令直接修改当前系统的文件监视器上限：

echo 500000 | sudo tee /proc/sys/fs/inotify/max_user_watches

2. 永久生效（重启后依然有效） #

先把配置写入系统的sysctl文件：

echo "fs.inotify.max_user_watches=500000" | sudo tee -a /etc/sysctl.conf

然后重新加载配置，让修改立刻生效：

sudo sysctl -p

我的项目目录结构 #

- public
  |- index.html
- src
  |- components
  |- containers
  |  |- App
  |  |  |- App.jsx
  |- presentational
  |  |- GenerateProposal
  |  |  |- GenerateProposal.jsx

相关代码示例 #

App.jsx #

import React from 'react';
import GenerateProposal from '../../presentational/GenerateProposal/GenerateProposal/';
const App = () => (
 <div className="App">
 <GenerateProposal />
 </div>
);
export default App;

GenerateProposal.jsx #

import React from 'react';
import { PageHeader } from 'react-bootstrap';
const GenerateProposal = () => (
 <PageHeader>This is a test!</PageHeader>
);
export default GenerateProposal;

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