React代码规范
-
components 展示性组件
里面一般存放ui组件，负责组件的外表，也就是组件如何渲染，具有很强的内聚性。展示性组件不关心渲染时使用的组件属性（Props）是如何获取到的，它只要知道有了这些Props后，组件应该如何渲染就足够了。属性如何获取，是容器性组件负责的事情。当展示性组件状态的变化需要同步到源数据时，需要调用容器性组件中的方法，这个方法一般也是通过Props传递给展示性组件。 -
containers 容器组件
负责业务流程逻辑的处理，如发送网络请求，处理请求数据，将处理过的数据传递给子组件的Props使用。同时，容器性组件提供源数据的方法，以Props方式传递给子组件，当子组件的状态变更引起源数据的变化时，子组件通过调用容器性组件提供的方法同步这些变化。 -
容器性组件和展示性组件可以相互嵌套，一个容器性组件可以包含多个展示性组件和其他的容器性组件；一个展示性组将也可以包含容器性组件和其他的展示性组件。这样的分工，可以使与组件渲染无直接关系的逻辑由容器性组件集中负责，展示性组件只关注组件的渲染逻辑，从而使展示性组件更容易被复用。对于非常简单的页面，一般只要一个容器性组件就足够了；但对于负责页面，则需要多个容器性组件，否则所有的业务逻辑都在一个容器性组件中处理的话，会导致这个组件非常复杂，同时这个组件获取到的源数据，可能需要经过很多层的组件Props的传递，才能到达最终使用的展示性组件。
基本规则
- 1.每个文件只包含一个 React 组件
- 2.使用 JSX 语法
- 3.使用class基础写组件，少用React.createClass
命名
- 扩展名: 使用 jsx 作为 React 组件的扩展名
- 文件名: 文件命名采用帕斯卡命名法，如：ReservationCard.jsx，以大写开头，index.js除外
- 页面目录统一以小写字母开头，遵循驼峰规则，
- 引用名: 组件引用采用帕斯卡命名法，其 实例采用驼峰式命名法。
// 反例
const reservationCard = require('./ReservationCard');
// 正例
const ReservationCard = require('./ReservationCard');
// 反例
const ReservationItem = <ReservationCard />;
// 正例
const reservationItem = <ReservationCard />;
组件命名: 使用文件名作为组件名。
- 例如：ReservationCard.jsx 组件的引用名应该是 ReservationCard。
然而，对于一个目录的根组件，应该使用 index.jsx 作为文件名，使用目录名作为组件名。
// 反例
const Footer = require('./Footer/Footer.jsx')
// 反例
const Footer = require('./Footer/index.jsx')
// 正例
const Footer = require('./Footer')
对齐
- 对于 JSX 语法，遵循下面的对齐风格
// 反例
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
// 正例
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// if props fit in one line then keep it on the same line
<Foo bar="bar" />
// children get indented normally
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Spazz />
</Foo>
引号
- 对于 JSX 使用双引号，对其它所有 JS 属性使用单引号
为什么？因为 JSX 属性不能包含被转移的引号，并且双引号使得如 "don't" 一样的连接词很容易被输入。
常规的 HTML 属性也应该使用双引号而不是单引号，JSX 属性反映了这个约定。
// 反例
<Foo bar='bar' />
// 正例
<Foo bar="bar" />
// 反例
<Foo style={{ left: "20px" }} />
// 正例
<Foo style={{ left: '20px' }} />
空格
- 在自闭和标签之前留一个空格
// 反例
<Foo/>
// 反例
<Foo />
// 反例
<Foo
/>
// 正例
<Foo />
属性
- 属性名采用驼峰式命名法
// 反例
<Foo
UserName="hello"
phone_number={12345678}
/>
// 正例
<Foo
userName="hello"
phoneNumber={12345678}
/>
括号
- 当组件跨行时，要用括号包裹 JSX 标签。eslint rules: react/wrap-multilines
// 反例
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>;
}
// 正例
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
// 正例, when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
标签
- 没有子组件的父组件使用自闭和标签。eslint rules: react/self-closing-comp
// 反例
<Foo className="stuff"></Foo>
// 正例
<Foo className="stuff" />
- 如果组件有多行属性，闭合标签应写在新的一行上。
- eslint rules: react/jsx-closing-bracket-location
// 反例
<Foo
bar="bar"
baz="baz" />
// 正例
<Foo
bar="bar"
baz="baz"
/>
方法
- 不要对 React 组件的内置方法使用 underscore (下划线)前缀
// 反例
React.createClass({
_onClickSubmit() {
// do stuff
}
// other stuff
});
// 正例
class extends React.Component {
onClickSubmit() {
// do stuff
}
// other stuff
});
顺序
- 继承 React.Component 的类的方法遵循下面的顺序
constructor(){
super(props);
this.state = {
}
}
// optional static methods
getChildContext(){}
componentWillMount(){}
componentDidMount(){}
componentWillReceiveProps(){}
shouldComponentUpdate(){}
componentWillUpdate(){}
componentDidUpdate(){}
componentWillUnmount(){}
// clickHandlers or eventHandlers like
onClickSubmit() {}
onChangeDescription(){}
// getter methods for render like
getSelectReason() {}
// Optional render methods like
renderNavigation(){}
render(){}
- 如何定义 propTypes，defaultProps，contextTypes等属性，如下所示
import React, { PropTypes } from 'react';
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: 'Hello World',
};
class Link extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;
网友评论