聊聊React开发的一些坑（一）

[[404350]]

一、项目生成

create-react-app saucxs-web 生成项目
cd saucxs-web 进入项目
yarn start 启动项目

二、项目部署

本地开发 yarn start
线上部署 yarn build

三、参考文档

react 英文文档[1]
create-react-app[2]
ant UI库的配置参考[3]
react-router 英文[4]
react-router 中文[5]

四、配置项

1、Ant Design UI库引入

yarn add antd 安装UI库
yarn add babel-plugin-import 实现按需引入

package.json/babel 中增加如下内容：

 
 
 
  
  
  "plugins": [ 
  
  
      [ 
  
  
          "import", 
  
  
          { 
  
  
              "libraryName": "antd", 
  
  
              "libraryDirectory": "es", 
  
  
              "style": "css" 
  
  
          } 
  
  
      ] 
  
  
  ]

组件使用如下：

 
 
 
  
  
  import React, { Component } from 'react'; 
  
  
  import { Button } from 'antd' 
  
  
  import 'antd/dist/antd.css' 
  
  
  class App extends Component { 
  
  
    render() { 
  
  
      return ( 
  
  
          松宝写代码 
  
  
      ); 
  
  
    } 
  
  
  } 
  
  
  export default App;

此时可以使用UI库的默认样式

2、自定义Ant Design UI库样式

安装 less 和 less-loader
使用命令 yarn run eject 暴露配置文件
在 webpack.config.dev.js 与 webpack.config.prod.js 中做如下修改：

创建 antModifyVars.js 文件

 
 
 
  
  
  'use strict'; 
  
  
  const modifyVars = { 
  
  
    'primary-color': '#E26A6A', 
  
  
  } 
  
  
  module.exports = modifyVars;

创建 less 相关变量，参考默认sass的配置：

 
 
 
  
  
  // style files regexes 
  
  
  const cssRegex = /\.css$/; 
  
  
  const cssModuleRegex = /\.module\.css$/; 
  
  
  const sassRegex = /\.(scss|sass)$/; 
  
  
  const sassModuleRegex = /\.module\.(scss|sass)$/; 
  
  
  // 增加less部分 
  
  
  const lessRegex = /\.less/; 
  
  
  const lessModuleRegex = /\.module\.less$/;

在 module.rules 的 oneOf 下，仿照sass追加一下代码：

 
 
 
  
  
  // Opt-in support for LESS (using .less extensions). 
  
  
  // Chains the less-loader with the css-loader and the style-loader 
  
  
  // to immediately apply all styles to the DOM. 
  
  
  // By default we support LESS Modules with the 
  
  
  // extensions .module.scss or .module.sass 
  
  
  { 
  
  
      test: lessRegex, 
  
  
      exclude: lessModuleRegex, 
  
  
      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), 
  
  
  }, 
  
  
  // Adds support for CSS Modules, but using SASS 
  
  
  // using the extension .module.scss or .module.sass 
  
  
  { 
  
  
      test: lessModuleRegex, 
  
  
      use: getStyleLoaders( 
  
  
      { 
  
  
          importLoaders: 2, 
  
  
          modules: true, 
  
  
          getLocalIdent: getCSSModuleLocalIdent, 
  
  
      }, 
  
  
      'less-loader'), 
  
  
  },

在 getStyleLoaders 中，处理 less-loader

 
 
 
  
  
  // dev下的配置 
  
  
  if (preProcessor) { 
  
  
      let loader = {loader: require.resolve(preProcessor)} 
  
  
      if (preProcessor === "less-loader") { 
  
  
          loader.options.modifyVars = modifyVars 
  
  
          loader.options.javascriptEnabled = true 
  
  
      } 
  
  
      loaders.push(loader); 
  
  
  } 
  
  
  // prod下的配置 
  
  
  if (preProcessor) { 
  
  
      let loader = { 
  
  
           loader: require.resolve(preProcessor), 
  
  
           options: { 
  
  
              sourceMap: shouldUseSourceMap, 
  
  
          }, 
  
  
      } 
  
  
      if (preProcessor === "less-loader") { 
  
  
          loader.options.modifyVars = modifyVars 
  
  
          loader.options.javascriptEnabled = true 
  
  
      } 
  
  
      loaders.push(loader); 
  
  
    }

3、ES6 API支持，引入polyfills

增加低版本浏览器、IE浏览器对ES6API的支持，IE9，IE9+

方法一，安装 yarn add react-app-polyfill

 
 
 
  
  
  // src/index.js中的【第一行】引入对IE9及更高版本的支持 
  
  
  import 'react-app-polyfill/ie9'; 
  
  
  // 其他支持，如：对IE11及更高版本的支持 
  
  
  import 'react-app-polyfill/ie11';

方法二，安装 yarn add babel-polyfill

 
 
 
  
  
  // webpack.base.conf.js中引入： 
  
  
  require("babel-polyfill") 
  
  
  // webpack.base.conf.js中配置： 
  
  
  entry: { app: ['babel-polyfill', './src/main.js'] }

4、引入 react-router-dom 路由

react-router-dom 依赖 react-router，所以使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。
由于需要权限配置，所以增加AuthorizedRoute.js控制权限

5、配置别名，@ 指向 src 目录

webpack.base.conf.js 与 webpack.base.conf.js的配置一致，如下：

 
 
 
  
  
  定义resolvePath方法，新版中resolve名称被占用 
  
  
  function resolvePath (dir) { 
  
  
    return path.join(__dirname, '..', dir) 
  
  
  } 
  
  
  // resolve.alias中增加别名配置： 
  
  
  '@': resolvePath('src')

6、引入 axios

在package.json底部增加以下代码解决跨域问题

 
 
 
  
  
  // 新版本需要借助http-proxy-middleware，在src下创建setupProxy.js，内容： 
  
  
  // 会自动引用，不需要额外的配置 
  
  
  const proxy = require('http-proxy-middleware') 
  
  
  module.exports = function (app) { 
  
  
    app.use( 
  
  
      proxy( 
  
  
        '/api', { 
  
  
          target: 'http://**********', 
  
  
          changeOrigin: true 
  
  
        } 
  
  
      ) 
  
  
    ) 
  
  
  } 
  
  
  // 定义多个入口： 
  
  
  module.exports = function (app) { 
  
  
    app.use(proxy('/api', { target: 'http://localhost:7001' })); 
  
  
    app.use(proxy('/api2', { target: 'http://localhost:7001' })); 
  
  
  }

7、样式处理

使用react-css-modules实现组件内部样式与外部分离，使用方式：

 
 
 
  
  
  import React from 'react' 
  
  
  import CSSModules from 'react-css-modules'; 
  
  
  import { Button } from 'antd' 
  
  
  import styles from './Header.module.scss' 
  
  
  class Header extends React.Component { 
  
  
    render () { 
  
  
      return ( 
  
  
         
  
  
          松宝写代码

)

}

export default CSSModules(Header, styles)

注意：

由于最新版create-react-app已经实现配置，无需再修改webpack配置文件
上述方法可实现，同时使用antd样式、全局样式、组件私有样式
特别注意组件私有样式文件的命名[name].module.scss

8、针对create-react-app 2.1.1之前的版本，引入 stylus

安装 stylus 和 stylus-loader
使用命令 yarn run eject 暴露配置文件
在 webpack.config.dev.js 与webpack.config.prod.js 的 module/rules/oneOf 中修改一下代码：

 
 
 
  
  
  { 
  
  
      test: /\.(css|styl)$/, 
  
  
          use: [ 
  
  
              require.resolve('style-loader'), 
  
  
              { 
  
  
                  loader: require.resolve('css-loader'), 
  
  
                  options: { 
  
  
                    importLoaders: 1, 
  
  
                  }, 
  
  
              }, 
  
  
              { 
  
  
                  loader: require.resolve('postcss-loader'), 
  
  
                  options: { 
  
  
                      // Necessary for external CSS imports to work 
  
  
                      // https://github.com/facebookincubator/create-react-app/issues/2677 
  
  
                      ident: 'postcss', 
  
  
                      sourceMap: true, 
  
  
                      plugins: () => [ 
  
  
                          require('postcss-flexbugs-fixes'), 
  
  
                          autoprefixer({ 
  
  
                              browsers: [ 
  
  
                              '>1%', 
  
  
                              'last 4 versions', 
  
  
                              'Firefox ESR', 
  
  
                              'not ie < 9', // React doesn't support IE8 anyway 
  
  
                          ], 
  
  
                          flexbox: 'no-2009', 
  
  
                      }), 
  
  
                  ], 
  
  
              }, 
  
  
          }, 
  
  
          { 
  
  
              loader: require.resolve('stylus-loader'), 
  
  
              options: { 
  
  
                  sourceMap: true, 
  
  
              } 
  
  
          }, 
  
  
      ], 
  
  
  },

五、开发过程中遇到的问题

1、warning提示：no-op

参考内容[6]

问题描述

warning：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

名次解释 no-op

Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component.

也就是不能在卸载的组件中进行状态更新操作，如异步请求、事件、定时器等，在componentWillUnmount生命周期中都应该进行相应的取消处理

对于事件、定时器，只需要在componentWillUnmount方法中，进行取消事件监听或者清除定时器的操作即可

以下方案均针对异步操作带来的问题进行处理。

方案一：使用一个变量[_isMounted]来控制是否更新状态

 
 
 
  
  
  import React from 'react' 
  
  
  class newComponent extends React.Component { 
  
  
    _isMounted = false 
  
  
    componentDidMount() { 
  
  
      this._isMounted = true 
  
  
      axios 
  
  
        .get('https://hn.algolia.com/api/v1/search?query=react') 
  
  
        .then(result => 
  
  
        if (!this._isMounted) return 
  
  
          this.setState({ 
  
  
            news: result.data.hits, 
  
  
          }), 
  
  
        ) 
  
  
    } 
  
  
    componentWillUnmount() { 
  
  
      // 取消事件监听、清除定时器、控制异步请求 
  
  
      this._isMounted = false 
  
  
    } 
  
  
    render() { 
  
  
      return ( 
  
  
        ... 
  
  
      ) 
  
  
    } 
  
  
  } 
  
  
  export default newComponent

方案二：比较粗暴的方式，直接更改setState函数

 
 
 
  
  
  import React from 'react' 
  
  
  class newComponent extends React.Component { 
  
  
    componentWillUnmount() { 
  
  
      // 取消事件监听、清除定时器、控制异步请求 
  
  
      this.setState = () => { 
  
  
        return 
  
  
      } 
  
  
    } 
  
  
    render() { 
  
  
      return ( 
  
  
        ... 
  
  
      ) 
  
  
    } 
  
  
  } 
  
  
  export default newComponent

方案三，可直接取消接口请求，如axios的CancelToken

2、react-router4.0版本中，不同场景下的路由跳转

参考[7]

方案一，官方推荐，使用withRouter

 
 
 
  
  
  import React from 'react' 
  
  
  import { withRouter } from 'react-router-dom' 
  
  
  class NewComponent extends React.Component { 
  
  
    AFunction() { 
  
  
      this.props.history.push('/path') 
  
  
    } 
  
  
    render() { 
  
  
      return ( 
  
  
        ... 
  
  
      ) 
  
  
    } 
  
  
  } 
  
  
  export default withRouter(NewComponent)

方案二，不推荐，使用context

 
 
 
  
  
  import React from 'react' 
  
  
  import PropTypes from 'prop-types' 
  
  
  import { withRouter } from 'react-router-dom' 
  
  
  class NewComponent extends React.Component { 
  
  
    static contextTypes = { 
  
  
      router: PropTypes.object 
  
  
    } 
  
  
    constructor(props, context) { 
  
  
       super(props, context); 
  
  
    } 
  
  
    AFunction() { 
  
  
      this.context.router.history.push('/path') 
  
  
    } 
  
  
    render() { 
  
  
      return ( 
  
  
        ... 
  
  
      ) 
  
  
    } 
  
  
  } 
  
  
  export default NewComponent

方案三，使用history

在真实的业务场景中，经常需要在非react组件中使用路由跳转，如：接口统一处理场景下，用户登录失效时，跳转至登录页面。

由于react-router4.0中提供的BrowserRouter组件默认创建了history，并且未暴露出来，在非react中使用history会出现不起作用的情况

因此：可不使用BrowserRouter组件，自行创建一个history，如下：

•创建history

 
 
 
  
  
  // src/history.js 一定要放在src的根目录下 
  
  
  import createHistory from 'history/createBrowserHistory' 
  
  
  const history = createHistory() 
  
  
  export default history

•配置router

 
 
 
  
  
  // src/index.js  注意router上的history 
  
  
  import { Router, Link, Route } from 'react-router-dom' 
  
  
  import history from './history' 
  
  
  ReactDOM.render( 
  
  
     
  
  
       
  
  
        ... 
  
  
       
  
  
    , 
  
  
    document.getElementById('root'), 
  
  
  )

•其他地方使用，如接口统一处理层

 
 
 
  
  
  import history from '@/history'; 
  
  
  export function addProduct(props) { 
  
  
    return dispatch => 
  
  
      axios.post('xxx', props, config) 
  
  
        .then(response => { 
  
  
          history.push('/cart') 
  
  
        }) 
  
  
  }

引用链接

[1] react 英文文档: https://reactjs.org/docs/getting-started.html

[2] create-react-app: https://facebook.github.io/create-react-app/docs/getting-started

[3] ant UI库的配置参考: https://blog.csdn.net/qwe502763576/article/details/83242823

[4] react-router 英文: https://reacttraining.com/react-router/web/example/basic

[5] react-router 中文: http://router.happyfe.com/web/guides/quick-start

[6] 参考内容: https://www.robinwieruch.de/react-warning-cant-call-setstate-on-an-unmounted-component/

[7] 参考: https://github.com/brickspert/blog/issues/3

新闻名称：聊聊React开发的一些坑（一）
本文地址：http://www.shufengxianlan.com/qtweb/news44/425094.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联