用更合理的方式书写React和JSX
基本规则
- 每个文件只包含一个React组件；
- 但是无状态, 或者 Pure 组件 允许一个文件包含多个组件。eslint: react/no-multi-comp.
- 始终使用 JSX 语法;
- 不要使用 React.createElement方法，除非初始化 app 的文件不是 JSX 格式。
Class vs React.createClass vs stateless
-
如果组件拥有内部的 state 或者 refs 的时，更推荐使用 class extends React.Component，除非你有一个非常好的理由要使用 mixin。 eslint: react/prefer-es6-class
// bad const Listing = React.createClass({ // ... render() { return <div>{this.state.hello}</div>; } }); // good class Listing extends React.Component { // ... render() { return <div>{this.state.hello}</div>; } }
如果没有组件没有内部 state 或者 refs，那么普通函数 (不要使用箭头函数) 比类的写法更好：
// bad class Listing extends React.Component { render() { return <div>{this.props.hello}</div>; } } // bad (因为箭头函数没有“name”属性) const Listing = ({ hello }) => ( <div>{hello}</div> ); // good function Listing({ hello }) { return <div>{hello}</div>; }
命名
- 扩展名：React 组件使用.jsx扩展名；
- 文件名：文件名使用帕斯卡命名。 例如： ReservationCard.jsx。
-
引用命名：React 组件使用帕斯卡命名，引用实例采用驼峰命名。 eslint: react/jsx-pascal-case
// bad import reservationCard from './ReservationCard'; // good import ReservationCard from './ReservationCard'; // bad const ReservationItem = <ReservationCard />; // good const reservationItem = <ReservationCard />;
-
组件命名：组件名称应该和文件名一致， 例如： ReservationCard.jsx 应该有一个ReservationCard的引用名称。 但是， 如果是在目录中的组件， 应该使用 index.jsx 作为文件名 并且使用文件夹名称作为组件名：
// bad import Footer from './Footer/Footer'; // bad import Footer from './Footer/index'; // good import Footer from './Footer';
声明
-
不要使用｀displayName｀属性来命名组件，应该使用类的引用名称。
// bad export default React.createClass({ displayName: 'ReservationCard', // stuff goes here }); // good export default class ReservationCard extends React.Component { }
对齐
-
为 JSX 语法使用下列的对其方式。eslint: react/jsx-closing-bracket-location
// bad <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // good <Foo superLongParam="bar" anotherSuperLongParam="baz" />
// 如果组件的属性可以放在一行就保持在当前一行中 <Foo bar="bar" /> // 多行属性采用缩进 <Foo superLongParam="bar" anotherSuperLongParam="baz" > <Quux /> </Foo>
引号
-
JSX 的属性都采用双引号，其他的 JS 都使用单引号。eslint: jsx-quotes
为什么这样做？JSX 属性 不能包含转义的引号, 所以当输入"don't"这类的缩写的时候用双引号会更方便。
标准的 HTML 属性通常也会使用双引号，所以 JSX 属性也会遵守这样的约定。
// bad <Foo bar='bar' /> // good <Foo bar="bar" /> // bad <Foo style={{ left: "20px" }} /> // good <Foo style={{ left: '20px' }} />
空格
-
终始在自闭合标签前面添加一个空格。
// bad <Foo/> // very bad <Foo /> // bad <Foo /> // good <Foo />
属性
-
属性名称始终使用驼峰命名法。
// bad <Foo UserName="hello" phone_number={12345678} /> // good <Foo userName="hello" phoneNumber={12345678} />
-
当属性值等于true的时候，省略该属性的赋值。 eslint: react/jsx-boolean-value
// bad <Foo hidden={true} /> // good <Foo hidden />
括号
-
用括号包裹多行 JSX 标签。 eslint: react/wrap-multilines
// 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: react/self-closing-comp
// bad <Foo className="stuff"></Foo> // good <Foo className="stuff" />
-
如果控件有多行属性，关闭标签要另起一行。 eslint: react/jsx-closing-bracket-location
// bad <Foo bar="bar" baz="baz" /> // good <Foo bar="bar" baz="baz" />
方法
-
在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 eslint: react/jsx-no-bind
为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。
// bad class extends React.Component { onClickDiv() { // do stuff } render() { return <div onClick={this.onClickDiv.bind(this)} /> } } // good class extends React.Component { constructor(props) { super(props); this.onClickDiv = this.onClickDiv.bind(this); } onClickDiv() { // do stuff } render() { return <div onClick={this.onClickDiv} /> } }
-
React 组件的内部方法命名不要使用下划线前缀。
// bad React.createClass({ _onClickSubmit() { // do stuff }, // other stuff }); // good class extends React.Component { onClickSubmit() { // do stuff } // other stuff }
排序
-
class extends React.Component的顺序：
- static静态方法
- constructor
- getChildContext
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
- 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
- render函数中的 getter 方法 比如 getSelectReason() 或者 getFooterContent()
- 可选的 render 方法 比如 renderNavigation() 或者 renderProfilePicture()
-
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; -
React.createClass的排序：eslint: react/sort-comp
- displayName
- propTypes
- contextTypes
- childContextTypes
- mixins
- statics
- defaultProps
- getDefaultProps
- getInitialState
- getChildContext
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
- 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
- render函数中的 getter 方法 比如 getSelectReason() 或者 getFooterContent()
- 可选的 render 方法 比如 renderNavigation() 或者 renderProfilePicture()
- render
isMounted
-
不要使用 isMounted. eslint: react/no-is-mounted
为什么这样做? isMounted是一种反模式，当使用 ES6 类风格声明 React 组件时该属性不可用，并且即将被官方弃用。
扩展
- 上诉的规则，你可用通过eslint的react插件来完成配置:eslint-plugin-react ，javascript/packages/eslint-config-airbnb at master · airbnb/javascript · GitHub
- Fork了一个官方的repo，把规范翻译在这里，不仅有react的，还有两个很火的翻译版的ES5和ES6规则，强烈推荐没有读过的人读一下，对你了解ES6也是非常好的途径。GitHub - vikingmute/javascript: JavaScript Style Guide