經(jīng)過一段時(shí)間的react開發(fā)，自己總結(jié)了一些小習(xí)慣，自動(dòng)構(gòu)建webpack

1. 組件命名文件夾

一個(gè)組件一個(gè)文件夾，可讀性高，結(jié)構(gòu)清晰

文件夾：Danamic(組件首字母大寫)index.jsx style.less data.js

引用 ：

import Danamic from './Danamic'

webpack能自動(dòng)識(shí)別文件夾內(nèi)index文件 (index首字母只能小寫)

React 的 JSX 里約定分別使用首字母大、小寫來區(qū)分本地模塊的類和 HTML 標(biāo)簽。

2. 無狀態(tài)組件

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 = '沒有更多了'breakcase "1":text = '點(diǎn)擊加載更多'breakcase "0":text = '網(wǎng)絡(luò)加載問題，請(qǐng)稍后重試'break}return <div className="warning" onClick={clickFn}>{text}</div> }

沒有性能上的差別，就是實(shí)現(xiàn)同樣的功能，可以少寫下面這些代碼

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 能一眼看出父組件傳的參數(shù)以及類型

4. 提取數(shù)據(jù)請(qǐng)求

data.js import React from 'react' import ajax from 'ajax-promise-simple' import loadPage from '@/common/loadPage'module.exports = {//獲取全部評(píng)論async getList(params) {let result = await ajax.getJSON('/amsquare/detailcomment', params)return { succsess: result.code === 0, data: result.data ? result.data : [] }},//點(diǎn)贊async zanClick(params) {let result = await ajax.getJSON(`/amsquare/addcmtpraise`, params)// console.log(params)return { succsess: result.code === 0 }},//刪除動(dòng)態(tài)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)}},}

應(yīng)用：

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. 將多個(gè)組件放在一個(gè)index對(duì)外導(dǎo)出

import ajax from './ajax' import lazyload from './lazyload' import momentHelper from './momentHelper'export default { ajax, lazyload, momentHelper }

6. 提取封裝 共用組件

例如：

• loading
• log
• debounce
• 滑動(dòng)加載更多
• app下判斷登錄
• app下跳轉(zhuǎn)頁面

引用：

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

使用 @ 相當(dāng)于src目錄 (自動(dòng)構(gòu)建配置) (比用 ../ ./ 好理解一些)

7. 用let替換var

8. 代碼加注釋

9. webpack.config.js

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

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

10.webpack 端口號(hào)隨機(jī)

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

---

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

我的MarkDown學(xué)習(xí)之旅

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的我开发中总结的小技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。