我開發中總結的小技巧

xiangcy發表於2017-10-18

經過一段時間的react開發，自己總結了一些小習慣，自動構建webpack

1. 元件命名資料夾

一個元件一個資料夾，可讀性高，結構清晰


資料夾：Danamic(元件首字母大寫)

index.jsx
style.less
data.js

引用 ：

import Danamic from `./Danamic`

webpack能自動識別資料夾內index檔案 (index首字母只能小寫)

React 的 JSX 裡約定分別使用首字母大、小寫來區分本地模組的類和 HTML 標籤。

2. 無狀態元件


import React from `react`
import { render } from `react-dom`

function isEmpty(obj) {
    return obj === null || obj === undefined
}

export default ({ type, clickFn }) => {
    let text = ``
    switch ((isEmpty(type) ? `` : type).toString()) {
        case "2":
            text = `沒有更多了`
            break
        case "1":
            text = `點選載入更多`
            break
        case "0":
            text = `網路載入問題，請稍後重試`
            break
    }
    return <div className="warning" onClick={clickFn}>{text}</div>
}

沒有效能上的差別，就是實現同樣的功能，可以少寫下面這些程式碼

export default class extends React.Component {
    constructor(props) {
        super(props)
    }
}

3. static react.propTypes

constructor(props) {
    super(props)
  }
  
static propTypes = {
        info: React.PropTypes.object.isRequired,
        loginSuccess: React.PropTypes.func.isRequired,
    }

加上propTypes 能一眼看出父元件傳的引數以及型別

4. 提取資料請求

data.js



import React from `react`
import ajax from `ajax-promise-simple`
import loadPage from `@/common/loadPage`

module.exports = {

    //獲取全部評論
    async getList(params) {
        let result = await ajax.getJSON(`/amsquare/detailcomment`, params)
        return { succsess: result.code === 0, data: result.data ? result.data : [] }
    },

    //點贊
    async zanClick(params) {
        let result = await ajax.getJSON(`/amsquare/addcmtpraise`, params)
            // console.log(params)
        return { succsess: result.code === 0 }
    },

    //刪除動態
    async removeDT(params) {
        let result = await ajax.getJSON(`/amsquare/deldymanic`, params)
        if (result.code === 0) {
            const url = `http://wen.58.com/amsquare/main?from=weijiaoliu_nav`;
            const browser = window.____json4fe.browser;
            loadPage(url, browser, false)

        }
    },

}

應用：



import { getList } from `../data`


getListData = async () => {
        this.setState({
            loading: true
        })
        let { succsess, data } = await getList(this.infoConf)
        this.setState({
            loading: false
        })
        if (succsess) {
            this.setState((preState, props) => ({
                hasMore: data.length < this.infoConf.pageSize ? false : true,
                resultStatus: data.length < this.infoConf.pageSize ? 2 : 1,
                list: [...preState.list, ...data],
            }))
            this.infoConf.pageindex++;
        } else {
            this.setState({
                resultStatus: 0
            })
        }
    }

5. 將多個元件放在一個index對外匯出


import ajax from `./ajax`
import lazyload from `./lazyload`
import momentHelper from `./momentHelper`

export default { ajax, lazyload, momentHelper }

6. 提取封裝 共用元件

例如：

  • loading
  • log
  • debounce
  • 滑動載入更多
  • app下判斷登入
  • app下跳轉頁面

引用：


import { scrollBottom, debounce } from `@/common/scrollData`

使用 @ 相當於src目錄 (自動構建配置) (比用 ../ ./ 好理解一些)

7. 用let替換var

8. 程式碼加註釋

9. webpack.config.js


resolve: {
    ...
    extensions: [`.ts`, `.tsx`, `.js`, `.json`, `.styl`, `.less`], 
    ...
  },

require的時候可以直接使用require(`file`)，不用require(`file.js`)

10.webpack 埠號隨機

 port: Math.floor(Math.random() * 1001) + 7000,

最近寫文件比較多，所以把MarkDown整理了一遍，有需要可以參考：

我的MarkDown學習之旅

相關文章