我開發中總結的小技巧
阿新 • • 發佈:2018-12-22
經過一段時間的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整理了一遍,有需要可以參考:
來源:https://segmentfault.com/a/1190000011605171