react 项目使用Hot Module Reload（热加载）

什么是热加载？

所谓的 hot reload(热加载) 就是每次修改某个 js 文件后，自动页面局部更新，不需要刷新整个页面。

参考地址：https://github.com/facebook/create-react-app/issues/2317

react 项目使用Hot Module Reload没有Redux的情况

直接在index.js文件加下面代码即可

// regular imports
ReactDOM.render(<App /> , document.getElementById('root'))

if (module.hot) {
  module.hot.accept('./App', () => {
    ReactDOM.render(<App />, document.getElementById('root'))
  })
}

react 项目有Redux时使用Hot Module Reload

index.js

// Normal imports
import { Provider } from 'react-redux'
import configureStore from './redux/configureStore'

const store = configureStore()

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root'))

//上面的代码本身已经有了，加下面的代码即可
if (module.hot) {
  module.hot.accept('./App', () => {
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root'),
    )
  })
}

configureStore.js (or similar)

import { createStore } from 'redux'

import rootReducer from './reducers'

const configureStore = () => {
  const store = createStore(rootReducer)

　//上面的代码已经有的，加if里面的即可
  if (process.env.NODE_ENV !== "production") {
    if (module.hot) {
      module.hot.accept('./reducers', () => {
        store.replaceReducer(rootReducer)
      })
    }
  }

  return store
}

export default configureStore

-----------------------------分割线-------------------------------------

新建 react 项目

create-react-app my-app

修改端口号

node-modules文件夹  >  react-scripts文件夹  >  scripts文件夹 >  start.js

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;