react+ts项目学习开发总结

react-typescript项目基础指南

安装

npx create-react-app my-react --typescript

启动命令

npm start
npm test
npm run build
npm run eject

打包命令

npm run build

安装less并使用

1. npm install less-loader less --save-dev
2. 修改配置文件“node_modules>react-scripts/config/webpack.config.js”
   添加以下配置规则：

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    
    #配置位置： module>rules>oneOf
    {
      test: lessRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },

设置别名

注意：react+ts以及vue+ts的项目设置别名的时候，只设置webpack.config.js是不行的，要对应配置tsconfig.json配置文件才可以

// webpack.config.js
alias: {
    // 自定义别名 //这里..还是.是由当前配置文件和src目录的相对路径决定的
    '@': path.resolve(__dirname, '../src'),
    '@components': path.resolve(__dirname, '../src/components'),
    '@pages': path.resolve(__dirname, '../src/pages'),
},

// tsconfig.json
"baseUrl": ".", // 设置paths路径解析起点
"paths": {
  "@/*": ["src/*"], // 设置@为src目录
  "@pages/*": ["src/pages/*"], // 设置@pages为pages目录
  "@components/*": ["src/components/*"], // 设置@components为components目录
}

配置eslint自动格式化

webstorm配置

封装路由

用户权限

奇葩问题汇总

• 1、函数式组件中的生命周期；

• 2、componentDidMount和componentDidUpdate中不能同时使用setState；会报错，死循环；因为componentDidUpdate会在props和state变化时去触发；
  

• 3、constructor中使用setState无效且不报错（很恶心，导致劳资找了好久的问题）；

• 4、玛德，this.setState是浅拷贝，如果通过props来给state赋值了，此时，修改了state对应值，props对应值会跟着变化，你敢信？？？
  所以，页面如果使用props传递来的引用类型数据的时候要使用深拷贝的来赋值；