react组件定义（react组件命名规范）



每个文件只包含一个 React 组件

使用JSX语法

除非是从一个非JSX文件中初始化 app，否则不要使用React.createElement

</ul>

Class vs React.createClass

除非有更好的理由使用混淆(mixins)，否则就使用组件类继承React.Component。eslint 规则：react/prefer-es6-class

</ul>

// bad const Listing = React.createClass({ render() { return <div />; } });

// good class Listing extends React.Component { render() { return <div />; } }</pre>

扩展名: 使用jsx作为 React 组件的扩展名

文件名: 文件命名采用帕斯卡命名法，如：ReservationCard.jsx

引用名: 组件引用采用帕斯卡命名法，其实例采用驼峰式命名法。eslint rules: react/jsx-pascal-case

</ul>

// bad const reservationCard = require('https://www.open-open.com/lib/view/ReservationCard');

// good const ReservationCard = require('https://www.open-open.com/lib/view/ReservationCard');

// bad const ReservationItem = <ReservationCard />;

// good const reservationItem = <ReservationCard />;</pre>

组件命名: 使用文件名作为组件名。例如：ReservationCard.jsx组件的引用名应该是ReservationCard。然而，对于一个目录的根组件，应该使用index.jsx作为文件名，使用目录名作为组件名。

</ul>

// bad const Footer = require('https://www.open-open.com/lib/view/Footer/Footer.jsx')

// bad const Footer = require('https://www.open-open.com/lib/view/Footer/index.jsx')

// good const Footer = require('https://www.open-open.com/lib/view/Footer')</pre>

不要通过displayName来命名组件，通过引用来命名组件

</ul>

// bad export default React.createClass({ displayName: 'ReservationCard', // stuff goes here });

// good export default class ReservationCard extends React.Component { }</pre>

对于JSX语法，遵循下面的对齐风格。eslint rules: react/jsx-closing-bracket-location

</ul>

// bad <Foo superLongParam="bar" anotherSuperLongParam="baz" />

// good <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></pre>

对于JSX使用双引号，对其它所有 JS 属性使用单引号

</ul>

为什么？因为 JSX 属性不能包含被转移的引号，并且双引号使得如"don't"一样的连接词很容易被输入。常规的 HTML 属性也应该使用双引号而不是单引号，JSX 属性反映了这个约定。

</blockquote>

eslint rules: jsx-quotes

// bad <Foo bar='bar' />

// good <Foo bar="bar" />

// bad <Foo style={{ left: "20px" }} />

// good <Foo style={{ left: '20px' }} /></pre>

在自闭和标签之前留一个空格

</ul>

// bad <Foo/>

// very bad <Foo />

// bad <Foo />

// good <Foo /></pre>

属性名采用驼峰式命名法

</ul>

// bad <Foo UserName="hello" phone_number={} />

// good <Foo userName="hello" phoneNumber={} /></pre>

当组件跨行时，要用括号包裹 JSX 标签。eslint rules: react/wrap-multilines

</ul>

/// 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>; }</pre>

没有子组件的父组件使用自闭和标签。eslint rules: react/self-closing-comp

</ul>

// bad <Foo className="stuff"></Foo>

// good <Foo className="stuff" /></pre>

如果组件有多行属性，闭合标签应写在新的一行上。eslint rules: react/jsx-closing-bracket-location

</ul>

// bad <Foo bar="bar" baz="baz" />

// good <Foo bar="bar" baz="baz" /></pre>

不要对 React 组件的内置方法使用underscore前缀

</ul>

// bad React.createClass({ _onClickSubmit() { // do stuff }

// other stuff });

// good class extends React.Component { onClickSubmit() { // do stuff }

// other stuff });</pre>

继承 React.Component 的类的方法遵循下面的顺序

</li> </ul>

constructor

optional static methods

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()

getter methods for render like getSelectReason() or getFooterContent()

Optional render methods like renderNavigation() or renderProfilePicture()

render

</li> </ol>

怎么定义 propTypes，defaultProps，contextTypes 等等...

</ul>

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=https://www.open-open.com/lib/view/{this.props.url} data-id={this.props.id}>{this.props.text}</a> } }

Link.propTypes = propTypes; Link.defaultProps = defaultProps;

export default Link;</pre>

使用 React.createClass 时，方法顺序如下：

</li> </ul>

displayName

propTypes

contextTypes

childContextTypes

mixins

statics

defaultProps

getDefaultProps

getInitialState

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()

getter methods for render like getSelectReason() or getFooterContent()

Optional render methods like renderNavigation() or renderProfilePicture()

render

</ol>

eslint rules: react/sort-comp

来自：https://github.com/dwqs/react-style-guide

到此这篇react组件定义（react组件命名规范）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/78080.html