react開發中的總結技巧
經過一段時間的react開發，自己總結了一些小習慣，自動構建webpack
#### 1. 組件命名文件夾
一個組件一個文件夾，可讀性高，結構清晰
```js
文件夾：Danamic(組件首字母大寫)
index.jsx
style.less
data.js
```
引用 ：
import Danamic from ‘./Danamic‘
webpack能自動識別文件夾內index文件 (index首字母只能小寫)
React 的 JSX 裏**約定分別使用首字母大、小寫來區分本地模塊的類和 HTML 標簽**。
#### 2. 無狀態組件
```js
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>
}
```
沒有性能上的差別，就是實現同樣的功能，可以少寫下面這些代碼
```js
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
```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)
}
},
}
```
應用：
```js
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下跳轉頁面
引用：
```js
import { scrollBottom, debounce } from ‘@/common/scrollData‘
```
使用 @ 相當於src目錄 (自動構建配置) (比用 ../ ./ 好理解一些)
#### 7. 用let替換var
#### 8. 代碼加註釋
#### 9. webpack.config.js
```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學習之旅](https://segmentfault.com/a/1190000011591534)
react開發中的總結技巧