React.js 三周 -- 入门到搭建团队基础项目

吐槽

公司自己的产品，由于历史遗留问题，前端一直是和java放到一个项目里写的。

导致了，前端就被死死的绑在了IDEA战车上。想要看页面效果，先起几个java服务。想要调试一个改动，重启个java服务先。（热更新是有，但是间歇性失效，会给调试带来意想不到的困扰。）

选择 React.js 的原因

打算做前后分离，之前的技术路线是 Vue.js 多页。想多掌握些技能，对现有产品的结构，进行一次改革，解放前端。（产品的代码量已经不小了）于是咨询大佬，在方少和各位 React.js 大佬的力荐下。大胆的尝试使用 React.js （以前虽然接触过，但没写过）。如果只是实现逻辑，什么框架都可以。写过之后，React.js 的那种掌控感，可实现性，个人很喜欢，虽然也遇到很多坑。说这些，希望能给遇到类似问题的开发者一点参考。

正文

主要记录一下，从不会到折腾出一些东西的过程。写做分享，也写给自己。

注：文中涵盖的内容，可能不是有多难，也可能存在一些不正确性。

前期

项目结构

一个适合的项目结构，会给开发带来极大的快感。

> 代表文件夹

    ./src

        >assets // 静态资源

            >font-awesome

            logo.png

        >components // 放置 dumb 组件

            >alert

                >icon // 将 dumb 组件需要的 icon 放到一起，方便管理

                alert.js

                alert.less // css 模块化，只针对 alert.js 不会造成命名污染

            ...

        >containers // 放置 smart 组件

        >http

            >api // 针对不同模块的 api ，进行编写，方便多人开发，互不干扰

            http.js // 对 axios 的统一配置

        >utils

            skin.js // 皮肤文件

        App.js

        index.js

        registerServiceWork.js

        router.js // 将路由抽离，方便管理和修改

    config-overrides.js // webpack 配置

    package.json

package.json



...

"dependencies": {

    "ajv": "^6.5.2",

    "axios": "^0.18.0",

    "base64-js": "^1.3.0",

    "crypto-js": "^3.1.9-1",

    "file-loader": "^1.1.11",

    "prop-types": "^15.6.2",

    "react": "^16.4.2",

    "react-app-rewire-less": "^2.1.2",

    "react-dom": "^16.4.2",

    "react-modal": "^3.5.1",

    "react-router-dom": "^4.3.1",

    "react-scripts": "1.1.4",

    "react-app-rewired": "^1.5.2"

  },

  ...

为什么没有 redux react-redux ? 放在后面聊，其中也是有些取舍，有些爱恨情仇。
代码检测？当然 eslint 个人习惯用这个

webpack 配置

项目开始，使用 create-react-app，让人意想不到的是，项目开始的困难，并不是来自 React.js 的编写，而是 webpack 4.0 。create-react-app 中的配置，是隐藏起来的。npm eject 命令可以把配置暴露出来，进行配置。最后发现 react-app-rewired ，让我比较优雅的完成了配置。

react-app-rewired 的配置全都写在 config-overrides.js 中，放在项目根下，与 ./src 同级，下面是我的配置，及部分解释。

config-overrides.js

const path = require('path')

const rewireLess = require('react-app-rewire-less');

/**

 * @author Itroad

 * @version 0.1.0

 *

 * Cover webpack's configure

 * @param { object } config webpack export.module = {...}

 * @param { string } env production || development

 * @return { object } custom config

 */

module.exports = function override(config, env) {

  if (env === "production") {

    // File path of build

    // 解决 打包后 文件引用路径问题

    // 也可以在 package.json homepage: '.'，配置 但我喜欢放在一起，方便管理

    config.output.publicPath = '.' + config.output.publicPath

    // For require source file outside of src/. ( remove ModuleScopePlugin )

    // config.resolve.plugins = []

    // For css module

    config.module.rules[1].oneOf[2].loader[2].options['modules'] = true

    config.module.rules[1].oneOf[2].loader[2].options['localIdentName'] = '[name]_[local]__[hash:base64:5]'

    // 配置css 内对于 font 字体文件的引用路径

    config.module.rules[1].oneOf[3].options['publicPath'] = '../../'

    // Path alias

    config.resolve.alias = Object.assign({}, config.resolve.alias, {

      "@src": path.resolve("src/"),

      "@http": path.resolve("src/http"),

      "@assets": path.resolve("src/assets"),

      "@components": path.resolve("src/components"),

      "@containers": path.resolve("src/containers"),

      "@reducers": path.resolve("src/reducers"),

      "@styles": path.resolve("src/styles"),

      "@utils": path.resolve("src/utils"),

      "@static": path.join(process.cwd(), './static') // 引用./src 外部资源，默认只在./src 内，本文并未使用，这里只做类举，不做推荐

    })

  } else {

    // For require source file outside of src/. ( remove ModuleScopePlugin )

    // config.resolve.plugins = []

    // For css module

    config.module.rules[1].oneOf[2].use[1].options['modules'] = true

    config.module.rules[1].oneOf[2].use[1].options['localIdentName'] = '[name]_[local]__[hash:base64:5]'

    // config.module.rules[1].oneOf[2].exclude = [

    //   path.resolve(__dirname, 'node_modules'),

    //   path.resolve(__dirname, 'src/components'),

    // ]

    config.module.rules[1].oneOf.push({

      test: /\.css$/,

      use: ['style-loader', 'css-loader'],

      include: [

        path.resolve(__dirname, 'node_modules'),

        path.resolve(__dirname, 'src/components'),

      ]

    })

    // Path alias

    config.resolve.alias = Object.assign({}, config.resolve.alias, {

      "@src": path.resolve("src/"),

      "@http": path.resolve("src/http"),

      "@assets": path.resolve("src/assets"),

      "@components": path.resolve("src/components"),

      "@containers": path.resolve("src/containers"),

      "@reducers": path.resolve("src/reducers"),

      "@styles": path.resolve("src/styles"),

      "@utils": path.resolve("src/utils"),

      "@static": path.join(process.cwd(), './static')

    })

  }

  // To support less

  config = rewireLess(config, env);

  return config;

}

对打包后，index.html 中的文件路径，以及 .css 文件中对外部资源引用的路径
css 模块化，这样命名就不是头疼（之后会具体说明）
路径别名，避免路径写错，看着也优雅。缺点就是，vs code 的路径自动匹配不能用了

中期

项目结构，配置都搞定了。开始进入代码的编写。

毕竟这不是教程，那就说一些，我认为有点价值的。

由于没有采用任何的 UI 框架，所以都要自己实现

Modal

import React from 'react'

import ReactDom from 'react-dom'

import font from  '@assets/font-awesome/css/font-awesome.min.css'

import style from './modal.less'

const createModal = (Component, imgSrc, ModalStyle) => {

  let body = document.body;

  let showDom = document.createElement("div");

  // 设置基本属性

  showDom.classList.add(style.toast)

  body.appendChild(showDom);

  // 自我删除的方法

  let close = () => {

      ReactDom.unmountComponentAtNode(showDom);

      body.removeChild(showDom);

  }

  if(!ModalStyle) {

    ModalStyle = {

      width: '400px',

      height: '500px'

    }

  }

  if(ModalStyle) {

    if(parseInt(ModalStyle.width, 10)) {

      ModalStyle.width = parseInt(ModalStyle.width, 10) > (window.innerWidth - 100) ? (window.innerWidth - 100) : ModalStyle.width

    } else {

      ModalStyle.width = '400px'

      console.error('createToast width 属性值输入错误, 已使用默认值')

    }

    if(parseInt(ModalStyle.height, 10)) {

      ModalStyle.height = parseInt(ModalStyle.height, 10) > (window.innerHeight - 100) ? (window.innerHeight - 100) : ModalStyle.height

    } else {

      ModalStyle.height = '500px'

      console.error('createToast height 属性值输入错误, 已使用默认值')

    }

  }

  ReactDom.render(

      <div className='ReactModal__Content' style={ModalStyle}>

        <div className={style.head + ' skin-modal-head'}>

          <div>

            <img src={imgSrc} alt="emp"/>

            <p>弹框标题</p>

          </div>

          <i className={font['fa'] + ' ' + font['fa-close']} onClick={close}></i>

        </div>

        <Component close={close}/>

      </div>,

      showDom

  );

}

export default createModal

也许这是函数式编程吧
自己创建节点，灵活植入，用完删除
尺寸做了默认的设置，和根据网页可视范围宽高，对超出范围进行的处理
通过 props 将弹窗关闭方法传入子组件
还有一点，说不上多好的告警日志提示
官网也有 createPortal() 可供使用，我是写完之后才知道，也就不改了
parseInt(value, 10) 防止 '' ' ' 和不可转为数字的值

Alert

类似的方法，实现了 Alert ，其中包括：createConfirm createInfo createWarning createError 和 clearAlert 清除 Alert 的方法。说下 createConfirm 其他的没什么。

const createConfirm = (msg, cb) => {

 showDom = document.createElement("div");

 // 设置基本属性

 showDom.classList.add(style.toast)

 document.body.appendChild(showDom);

 // 自我删除的方法

 let close = () => {

     ReactDom.unmountComponentAtNode(showDom);

     document.body.removeChild(showDom);

 }

 const ModalStyle = {

   width: '300px',

   height: '165px'

 }

 ReactDom.render(

     <div className='ReactModal__Content' style={ModalStyle}>

       <div className={style.head + ' skin-modal-head'}>

         <div>

           <img src={confirm} alt="emp"/>

           <p>确认</p>

         </div>

         <i className={font['fa'] + ' ' + font['fa-close']} onClick={close}></i>

       </div>

       <div className={style.confirmContent}>

         <p className={style.msg}>

           {msg}

         </p>

       </div>

       <div className={style.footer}>

         <div onClick={close}>取消</div>

         <div onClick={cb}>确定</div>

       </div>

     </div>,

     showDom

 );

}

调用示例



/**

  * confirm 点击确认按钮的回调

  * @param {any} params

  */

 confirmCallBack (params) {

   console.log('test', params)

   clearAlert()

 }

 /**

  * 测试 confirm 弹窗

  */

 showNewConfirm () {

   createConfirm('确定要删除xxx ？', this.confirmCallBack.bind(this, 123))

 }

用了一个 cb 回调，来处理 confirm 点击确定的事件

Toast

这个就更简单了

import React from 'react'

import ReactDom from 'react-dom'

import style from './toast.less'

const createToast = (text, time) => {

  let body = document.body;

  let showDom = document.createElement("div");

  // 设置基本属性

  showDom.classList.add(style.toast)

  body.appendChild(showDom);

  // 自我删除的方法

  let close = () => {

      ReactDom.unmountComponentAtNode(showDom);

      body.removeChild(showDom);

  }

  if(!parseInt(time, 10)) {

    time = 1500

  }

  setTimeout(close, time)

  ReactDom.render(

      <div className={style.content}>

        {text}

      </div>,

      showDom

  );

}

export default createToast

第二个参数，传入关闭时间，默认 1500 毫秒

皮肤

这个就是，将皮肤样式，添加在页面的 <style></style> 中

/**

 * @author Jiang yang

 *

 * @description 生成皮肤样式

 * @version 0.0.1

 */

const skin = {}

skin.iceBlue = {

  // 全局字体颜色

  appColor: '#FFFFFF',

  appBgColor: 'black',

  // header

  headerBgColor: '#010a1c', // 框架头部背景色

  // left menu

  leftMenuBgColor: '#2c3e50', // 左侧菜单背景色

  leftMenuBorderColor: '#2c3e50', // 左侧菜单边颜色

  // right menu

  rightMenuBgColor: '#2c3e50', // 右侧菜单背景色

  rightMenuBorderColor: '#2c3e50', // 右侧菜单边颜色

  // content

  contentBgColor: 'rgb(60, 71, 84)', // 框架内容部分背景色

  // footer

  footerBgColor: '#2c3e50', // 框架底部背景色

  footerShadowColor: 'black', // 框架底部阴影色

  // modal

  modalOverlay: 'rgba(49, 52, 70, 0.75)', // 弹窗遮罩层

  modalContentBg: '#1f2c3a', // 弹窗背景

  modalContentShadow: 'gray', // 弹窗阴影

  modalContentTxt: 'white', // 弹窗字体颜色

  modalHeadBg: '#091323' // 弹窗头部

}

skin.lightBlue = {

  // 全局字体颜色

  appColor: 'black',

  appBgColor: 'white',

  // header

  headerBgColor: 'blue',

  // footer

  footerBgColor: 'blue',

  footerShadowColor: 'black',

  // left menu

  leftMenuBgColor: 'white',

  leftMenuBorderColor: '#2c3e50',

  // right menu

  rightMenuBgColor: 'white',

  rightMenuBorderColor: '#2c3e50',

  // content

  contentBgColor: 'white',

}

let getSkinStyle = (skin) => {

  if(!skin) {

    return '';

  }

  return `

    .skin-app {

      color: ${skin.appColor};

      background-color: ${skin.appBgColor};

    }

    .skin-header {

      background-color: ${skin.headerBgColor};

    }

    .skin-left-menu {

      background-color: ${skin.leftMenuBgColor};

      border-right: 1px solid ${skin.leftMenuBorderColor};

    }

    .skin-right-menu {

      background-color: ${skin.rightMenuBgColor};

      border-left: 1px solid ${skin.rightMenuBorderColor};

    }

    .skin-content {

      background-color: ${skin.contentBgColor};

    }

    .skin-footer {

      background-color: ${skin.footerBgColor};

      box-shadow: 0 -1px 10px ${skin.footerShadowColor};

    }

    .ReactModal__Overlay {

      background-color: ${skin.modalOverlay} !important;

    }

    .ReactModal__Content {

      background-color: ${skin.modalContentBg} !important;

      box-shadow: 0px 0px 10px ${skin.modalContentShadow};

      color: ${skin.modalContentTxt};

    }

    .skin-modal-head {

      background-color: ${skin.modalHeadBg};

    }

  `

}

let setSkinStyle = (skin) => {

  let styleText = getSkinStyle(skin);

  let oldStyle = document.getElementById('skin');

  const style = document.createElement('style');

  style.id = 'skin';

  style.type = 'text/css';

  style.innerHTML = styleText;

  oldStyle ? document.head.replaceChild(style, oldStyle) : document.head.appendChild(style);

}

setSkinStyle(skin.iceBlue)

export {skin, setSkinStyle}

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { HashRouter, Route } from 'react-router-dom'

import App from './App';

import Login from './components/login/login.js'

import registerServiceWorker from './registerServiceWorker';

import '@utils/skin' // 这里引入即可

ReactDOM.render(

    <HashRouter>

      <div style={{height:'100%'}}>

        <Route exact path='/' component={Login} />

        <Route path='/home' component={App} />

      </div>

    </HashRouter>,

  document.getElementById('root')

);

registerServiceWorker();

定义皮肤样色对象，然后根据对象生成样式，然后插入到页面中
多个皮肤，就多个皮肤颜色对象

import React, { Component } from 'react'

import PropTypes from 'prop-types'

import { Link } from 'react-router-dom'

import font from  '@assets/font-awesome/css/font-awesome.min.css'

import style from './menu.less'

class Menu extends Component {

  static propTypes = {

    data: PropTypes.array

  }

  constructor () {

    super()

    this.state = {

      isShow: null

    }

  }

  /**

   * 生命周期钩子: 根据 props 的变化，更新 state

   * @param {object} nextProps

   */

  static getDerivedStateFromProps (nextProps, prevState) {

    if (prevState.isShow) {

      return null

    }

    const data = nextProps.data

    /**

     * 递归生成 isShow 对象，控制菜单的展开和收缩

     * @param {array | object} data

     * @return {item+id: true, item2: false, ...}

     */

    function getIsShow (data) {

      let isShow = {}

      function getIsShowState (data) {

        if(data instanceof Array) {

          for(let item of data){

            getIsShowState(item)

          }

        } else {

          isShow['item' + data.id] = data.show

          getIsShowState(data.children)

        }

      }

      getIsShowState(data)

      return isShow

    }

    return {

      isShow: data ? getIsShow(data) : null

    }

  }

  /**

   * 通过 id 来查找 this.state.isShow 中的数据，从而控制菜单的显示状态

   * @param {number} id 菜单 id

   */

  handleClickMenu (id) {

    let current = {

      ['item'+ id]: !this.state.isShow['item'+ id]

    }

    let copyState = this.state.isShow

    this.setState({

      isShow: Object.assign({}, copyState, current)

    })

  }

  handleDisposeOperate (value) {

    if(this.props.operateCallBack) {

      this.props.operateCallBack(value)

    }

  }

  /**

   * 递归生成菜单的 DOM 结构

   * @param {array} data 菜单数据

   * @param {number} id 菜单id

   */

  handleCreateMenu (data, id) {

    let menuDom = [];

    if (data instanceof Array) {

      let list = []

      for (let item of data) {

        list.push(this.handleCreateMenu(item))

      }

      menuDom.push(

        <ul key={id ? 'ul-' + id : 'root'} className={style.menuUl} style={{display: id ? this.state.isShow['item' + id] ? 'block' : 'none' : 'block'}}>

          {list}

        </ul>

      )

    } else {

      let levelClass = data.level === 1 ? 'levelTop' : 'levelItem'

      let margLeft = (data.level * 16) + 'px'

      menuDom.push(

        <li key={data.id} id={data.id}>

          {

            data.children.length > 0

            ? <div onClick={this.handleClickMenu.bind(this, data.id)} className={style[levelClass]} style={{'paddingLeft': margLeft}}>

                <div>

                  {

                    data.level === 1

                    ? <img className={style.icon} src={require('./icon/' + data.icon)} alt="icon"/>

                    : ''

                  }

                  <span>{data.name}</span>

                </div>

                {

                  this.state.isShow['item' + data.id]

                  ? <i className={font['fa'] + ' ' + font['fa-angle-down']}></i>

                  : <i className={font['fa'] + ' ' + font['fa-angle-right']}></i>

                }

              </div>

            :

              data.operate

              ? <div onClick={this.handleDisposeOperate.bind(this, data.operate)}>

                  <div className={style[levelClass]} style={{'paddingLeft': margLeft}}>

                    <div>

                      {

                        data.level === 1

                        ? <img className={style.icon} src={require('./icon/' + data.icon)} alt="icon"/>

                        : ''

                      }

                      <span>{data.name}</span>

                    </div>

                  </div>

                </div>

              : <Link to={data.path}>

                  <div className={style[levelClass]} style={{'paddingLeft': margLeft}}>

                    <div>

                      {

                        data.level === 1

                        ? <img className={style.icon} src={require('./icon/' + data.icon)} alt="icon"/>

                        : ''

                      }

                      <span>{data.name}</span>

                    </div>

                  </div>

                </Link>

          }

          {this.handleCreateMenu(data.children, data.id)}

        </li>

      )

    }

    return menuDom;

  }

  render () {

    return (

      <div className=''>

        {this.props.data ? this.handleCreateMenu(this.props.data) : ''}

      </div>

    )

  }

}

export default Menu

handleCreateMenu() 根据数据，生成菜单结构
关于这种结构，官网也提及，要有 key 这就是为什么传入了 id，同时也是为了控制菜单折叠
菜单的折叠，用 state 来控制，具体看 getIsShow()
这里面我用了些 三元判断 甚至还嵌套了下

部分生命周期将要废弃

虽说这个要看官网，但是在看 React 小书 的时候，也因为生命周期的问题，耽搁了一下。

首先提供一下官网说明,中文的
componentWillMount() 这个就不用了，挂载之前的逻辑，写到 constructor() 里
componentWillUpdate() componentWillReceiveProps() 这两个不用了，写到 static getDerivedStateFromProps()

后期

发现前面该开发的，都写差不多。后期也没什么了。

我写了两份文档，DOCS.md 和 STANDARD.md

DOCS.md 是关于相关插件，函数的使用和说明

STANDARD.md 是这个项目的代码规范文档，部分针对这个项目，多数都是普遍的规范
要求打包之后，还要灵活的配置接口公共路径

public 中添加一个文件，env.js ，然后在 index.html 中手动引入

env.js
```
window.PROJECT_CONFIG = {

production: "http://..."

}
```
就是把变量放到 window 下，这样代码里就能 window.PROJECT_CONFIG.production 取到想要的数据，打包后，这个文件也一样存在，可以更改。环境变更的时候，就不用改代码，然后再打包了。

为何没有使用 Redux ?

这是部分页面

图中两个组件，是有频繁交互的。当时是考虑用 redux 和 react-redux 来写。而我也实现了。但是后来思前想后，觉得这种方式，如果让组里其他前端开发的话，不是那么友好。会写很多 map...

于是，我把右侧菜单，嵌套进了中间的组件中，外面看着没变化。但通信方式，已经变成了父子组件之间的通信方式。这就比较简单了。

这种处理方式，我认为是，用结构，来取代复杂的逻辑。

是的，每个页面，如何需要，都要带有自己的右侧菜单，仁者见仁智者见智吧。

特别感谢

这个一定要说在前面，在学习 React.js 的开始，就有小伙伴推荐了 react 小书, 作者胡子大哈。这本书称得上是

良心巨制 。（截至目前，看了四遍）

巴特西