精益 React 学习指南 (Lean React)- 4.1 react 代码规范
书籍完整目录
4.1 react 代码规范
关于
基础规范
组件结构
命名规范
jsx 书写规范
eslint-plugin-react
关于
在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通,好的模式能够上层设计上避免不必要的 bug 出现。本节会参考社区提供一些 React 的规范和优秀的设计模式。
基础规范
统一全部采用 Es6
组件文件名称采用大驼峰命名
组件结构
总体规则: stateless(Function) 优先于 Es6 Class 优先于 React.createClass;
书写规则: 规范组件内部方法的定义顺序
Es6 class 定义规范:
static
方法constructor
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
clickHandlers + eventHandlers 如
onClickSubmit()
或onChangeDescription()
getter methods for
render
如getSelectReason()
或getFooterContent()
render methods 如
renderNavigation()
或renderProfilePicture()
render
以 Es6 Class 定义的组件为例;
const defaultProps = {name: 'Guest'
};
const propTypes = {name: React.PropTypes.string
};
class Person extends React.Component {// 构造函数constructor (props) {super(props);// 定义 statethis.state = { smiling: false };// 定义 eventHandlerthis.handleClick = this.handleClick.bind(this);}// 生命周期方法componentWillMount () {},componentDidMount () {},componentWillUnmount () {},// getters and settersget attr() {}// handlershandleClick() {},// renderrenderChild() {},render () {},}/*** 类变量定义*/
Person.defaultProps = defaultProps;/*** 统一都要定义 propTypes* @type {Object}*/
Person.propTypes = propTypes;
命名规范
组件名称:大驼峰
属性名称:小驼峰
事件处理函数:
handleSomething
自定义事件属性名称:
onSomething={this.handleSomething}
key: 不能使用数组 index ,构造或使用唯一的 id
组件方法名称:避免使用下划线开头的命名
jsx 书写规范
自闭合
// bad
<Foo className="stuff"></Foo>// good
<Foo className="stuff" />
属性对齐
// bad
<Foo superLongParam="bar"anotherSuperLongParam="baz" />// good
<FoosuperLongParam="bar"anotherSuperLongParam="baz"
/>// if props fit in one line then keep it on the same line
<Foo bar="bar" />
返回
// bad
render() {return <MyComponent className="long body" foo="bar"><MyChild /></MyComponent>;
}// good
render() {return (<MyComponent className="long body" foo="bar"><MyChild /></MyComponent>);
}// good, when single line
render() {const body = <div>hello</div>;return <MyComponent>{body}</MyComponent>;
}
eslint-plugin-react
规范可以使用 eslint-plugin-react 插件来强制实施,规则和配置可查看
https://github.com/yannickcr/eslint-plugin-react
更多 react 代码规范可参考 https://github.com/airbnb/javascript/tree/master/react
精益 React 学习指南 (Lean React)- 4.1 react 代码规范相关推荐
- React学习(三):通过 React 编写名片组件(React属性)
阿里云服务器0元试用,首购低至0.9元/月起 [开发云]年年都是折扣价,不用四处薅羊毛 前置内容阅读 React学习(二):编写 React 组件并成功挂载 效果预览: 1. 启动 my-projec ...
- Python基础之在学习路上必须注意的几个代码规范
Python 的学习之旅,一定要先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 每条路是孤独的都会有坎坷不平,也许现在的你很累,但未来的路还很长,不要忘了当初为何 ...
- 精益 React 学习指南 (Lean React)- 3.4 掌控 redux 异步
书籍完整目录 3.4 redux 异步 在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux ...
- React学习整理(一):React 安装
官方提供的 CDN 地址: <script src="https://unpkg.com/react@16/umd/react.development.js">< ...
- 代码表征预训练语言模型学习指南:原理、分析和代码
©作者 | 孙秋实 学校 | 华东师范大学 研究方向 | 自然语言处理 自从 2020 年 CodeBERT 开了代码表征预训练模型(本文称之为 CodePTM)这个新坑后,在短短两年的时间内出现了若 ...
- React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
- react render没更新_web前端教程分享React学习笔记(一)
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
- React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 ID:suibichuanji 点击下方 ...
- React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...
最新文章
- 浅显易懂 Makefile 入门 (12)— Makefile 常见的错误信息
- 了解这些,你就可以在Spring启动时为所欲为了
- mysql 查询日志介绍
- 我们不要框计算 我们要更好的搜索体验
- 测试一下能够图文混排
- python复工_Python批量创建复工证明实现过程中的Bug汇总及其相应的解决方案
- excel sample
- KubeFlow安装指南
- ARMV8 datasheet学习笔记5:异常模型
- 光影变幻:自动化所基于最优传输理论的影视换脸技术
- 安卓渗透测试工具——Drozer(安装和使用)
- 探秘手淘高可用平台(三)——热修复和开发流程
- Vue项目中使用浏览器同步测试工具 browersync
- 如何免费搭建个人网站
- QWebEngineView崩溃及替代方案
- CSDN:2020 年度 CSDN 博客之星评选——28 号【沉默王二】,感谢你投上的宝贵一票,感谢!
- js实现中英文合并排序
- arcgis如何将16bit栅格数据转换为8bit栅格数据
- 【机器学习实验二】k-NN算法—改进约会网站以及手写体数字识别
- mmdetection特征可视化V2
热门文章
- java连接rabbitmq_RabbitMQ教程(工作模式篇)
- php pdo 新建数据库,php – 使用PDO数据库类而不是每次都创建新...
- eclipse+java+selenium+testNG搭建自动化测试框架
- 华为智慧屏鸿蒙挂安卓9,荣耀先行!华为智慧屏9月发布:搭鸿蒙系统和自研芯片...
- python list增删改查_Python 基础list 增删改查 解析
- 黑匣子解密要多久_科普|飞机上的黑匣子内置电池可工作多久?
- dll文件懒加载_dll编写与使用操作手册
- java二进制 字节数组 字符 十六进制 BCD编码转换
- 前端校验rules写法:
- Spark基础学习笔记05:搭建Spark Standalone模式的集群