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)

时间: 2024-10-10 18:14:26

react开发中的总结技巧的相关文章

Js开发中常用的技巧(上)

Js开发中常用的技巧 1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量.很显然,全局变量的搜索要比局部变量慢得多:这样就是很多像jQuery等js类库,将window作为入参传入的原因之一. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快.(两个之间的区别,详见博主的博客). 3.underfined.null.0.fa

Linux以及Android开发中的小技巧和长繁命令记录收集

不断更新收集中.... 2014071743 ssh以nx_guest的身份登录到172.24.221.137,然后在172.24.221.137与172.24.61.252的8080端口建立网络连接,同时创建端口为5678的本地代理服务 ssh -C -f -N -o 'TCPKeepAlive=yes' -L 5678:172.24.61.252:8080 [email protected] 反编译android下的二进制程序 ./prebuilts/gcc/linux-x86/arm/ar

知识点回顾-27个iOS开发中的小技巧

★27个iOS开发中的小技巧 1.不想让TableView显示无用的Cell分割线怎么办? self.tableView.tableFooterView = [[UIView alloc] init]; 2.自定义了leftBarbuttonItem左滑返回手势失效了怎么办? self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:img style:UIBarButtonItemStylePl

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求 最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

Android开发中的小技巧

转自:http://blog.csdn.net/guxiao1201/article/details/40655661 简介: startActivities (Intent[] intents) setError (CharSequence error) 动画reverse () addLinks (TextView text, int mask) SystemClock public static void sleep (long ms) registerActivityLifecycleC

react 开发中的问题简记

1.什么时候用props 什么时候用state ? 不能使用props:当页面组件存在URL跳转问题时候,原因:若单独刷新,他会报错,拿不到前面的数据: 使用props场景:当组件为页面组件的一部分即没有专有的URL配置的时候可以使用. state:保持当前状态请求一般都会放在state里. 2.开发中遇到的问题,路径状态改变前一个状态不会消失(BUG) 例如:弹出浮层: 利用react中的周期函数:componentWillReceiveProps(nextprops)以下为传递的请求路径不一

react开发中如何使用require.ensure加载es6风格的模块

1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:一般语言编译工具(如babel),不支持直接require一个es6风格的React组件. 怎么办?? 3.react代码分割方式: react代码分割常见使用router方式,但是单页面应用,不打算router下,可以用require.ensure进行按需加载

Android 开发中常用小技巧

TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以sp为单位的. 所以如果直接用返回的值来设置会出错,解决办法是 用setTextSize()的另外一种形式,可以指定单位: 在继承自View时,绘制bitmap时,需要将图片放到新建的drawable-xdpi 中,否则容易出现绘制大小发生改变 在文字中加下划线: textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG); scro

React开发中的坑

1.React Router4的传值方式: (1)内部数据传递:刷新后不保存. //需要跳转的组件 import {withRouter} from "react-router-dom"; export default withRouter(组件名); this.props.history.push({ pathname: "路径", state: 数据 //整个传过去,接受到的也是完整的数据 }) //路径的组件 this.props.location.state