React的使用

160 阅读1分钟

yarn create react-app my-app

怎样重写webpack配置

使用react-app-rewired

npm install react-app-rewired --save-dev

在项目根目录创建 config-overrides.js文件

 /* config-overrides.js */
module.exports = function override(config, env) {
  console.log('原webpack配置 config:',config)
  
  //在这里修改config就行
  
  console.log('修改后webpack配置 config:',config)
  return config;
}

package.json里的scripts

  "scripts": {
//   "start": "react-scripts start",
   "start": "react-app-rewired start",
//    "build": "react-scripts build",
   "build": "react-app-rewired build",
//   "test": "react-scripts test --env=jsdom",
   "test": "react-app-rewired test --env=jsdom"
}

查看create-react-app自带的依赖

npm run eject的作用就是将原有隐藏的依赖(比如Webpack, Babel, ESLint等)暴露出来, 请注意这是不可逆的行为。

//npm run eject执行后 项目下多了这样的文件
// create-react-app版本为1.5.2
|-config
    |-jest
        |-cssTransform.js
        |-fileTransform.js
    |-env.js
    |-paths.js
    |-webpack.config.dev.js
    |-webpack.config.prod.js
    |-webpackDevServer.config.js

生命周期

挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载 当组件从 DOM 中移除时会调用如下方法:

componentWillUnmount()