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);
// 定义 state
this.state = { smiling: false };
// 定义 eventHandler
this.handleClick = this.handleClick.bind(this);
}
// 生命周期方法
componentWillMount () {},
componentDidMount () {},
componentWillUnmount () {},
// getters and setters
get attr() {}
// handlers
handleClick() {},
// render
renderChild() {},
render () {},
}
/**
* 类变量定义
*/
Person.defaultProps = defaultProps;
/**
* 统一都要定义 propTypes
* @type {Object}
*/
Person.propTypes = propTypes;
命名规范
组件名称：大驼峰
属性名称：小驼峰
事件处理函数：handleSomething
自定义事件属性名称：onSomething={this.handleSomething}
key: 不能使用数组 index ，构造或使用唯一的 id
组件方法名称：避免使用下划线开头的命名
jsx 书写规范自闭合
// bad// good
属性对齐
// bad// good // if props fit in one line then keep it on the same line
返回
// bad
render() {
return
;
}
// good
render() {
return (
);
}
// good, when single line
render() {
const body = hello;
return {body} ;
}
eslint-plugin-react
规范可以使用 eslint-plugin-react 插件来强制实施，规则和配置可查看
https://github.com/yannickcr/eslint-plugin-react
更多 react 代码规范可参考 https://github.com/airbnb/javascript/tree/master/react
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79800.html
摘要：需要提醒读者的是，的很多例子都是通过来写的，但这并不是语法，后面我们会有单独的一小节讲解的基本语法，不过目前为止我们先将跟多精力放在上。 书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：单向数据流应用的核心设计模式，数据流向自顶向下我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句。然而的单向数据流的设计让前端定位变得简单，页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。 书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
摘要：无状态组件除了可以通过来创建组件以外，组件也可以通过一个普通的函数定义，函数的返回值为组件渲染的结果。这就是为什么要有属性，属性能够帮助定位与数组元素的关系，在重渲染的时候能够实现渲染优化。 书籍完整目录 1.3 React 组件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 组件介绍 在 React 中组件是第一元...
阅读 2901·2021-10-15 09:41
阅读 2960·2021-09-22 16:05
阅读 2180·2021-09-22 15:19
阅读 2699·2021-09-02 15:11
阅读 2331·2019-08-30 15:52
阅读 710·2019-08-30 11:06
阅读 872·2019-08-29 16:44
阅读 990·2019-08-23 18:18
