2019-08-02 11:53:41 qq_37205708 阅读数 116

github

更多前端资源和知识整理:https://github.com/ChenMingK/WebKnowledges-Notes

1. 基本规范

  • 每个文件只写一个模块
    • 但是多个无状态模块可以放在单个文件中. eslint: react/no-multi-comp
  • 推荐使用 JSX 语法
  • 不要使用React.createElement,除非从一个非 JSX 的文件中初始化你的 app

2. 创建模块

  • 如果你的模块有内部状态或者是 refs, 推荐使用 class extends React.Component 而不是 React.createClass,也就是说推荐使用 ES6 语法创建 component
// 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>
  }
}

// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// good
function Listing({ hello }) {
  return <div>{hello}</div>
}

3. 命名

  • 扩展名: 使用 .jsx 作为 React 组件的扩展名
  • 文件名: 使用帕斯卡命名法命名文件,譬如 ReservationCard.jsx
  • 引用命名: 使用帕斯卡命名法命名组件和 camelCase 命名实例
// bad
const reservationCard = require('./ReservationCard')

// good
const ReservationCard = require('./ReservationCard')
  • 模块命名: 模块使用当前文件名一样的名称. 比如 ReservationCard.jsx 应该包含名为 ReservationCard 的模块. 但是,如果整个文件夹是一个模块,使用 index.js 作为入口文件,然后直接使用 index.js 或者文件夹名作为模块的名称
// bad
import Footer from './Footer/Footer';

// bad
import Footer from './Footer/index';

// good
import Footer from './Footer';
  • 高阶模块命名: 对于生成一个新的模块,其中的模块名 displayName 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 withFoo(), 当传入一个 Bar 模块的时候, 生成的模块名 displayName 应该为 withFoo(Bar)

为什么?一个模块的 displayName 可能会在开发者工具或者错误信息中使用到,因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么,更好地 Debug

// bad
export default function withFoo(WrappedComponent) {
  return function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }
}

// good
export default function withFoo(WrappedComponent) {
  function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }

  const wrappedComponentName = WrappedComponent.displayName
    || WrappedComponent.name
    || 'Component';

  WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  return WithFoo;
}

4. 常见模式

1.多行书写

  • 需要嵌套元素的任何情况下都应该多行书写
// bad
<div><Header /><div><Main content={...} /></div></div>

// good
<div>
    <Header />
        <div>
            <Main content={...} />
        </div>
</div>
  • 如果出现子节点不是元素,而是文本或变量这样的例外情况,那么应该和父节点的标签写在同一行,并避免产生混淆
// good
<div>
    <Alert>{message}</Alert>
    <Button>Close</Button>
</div>
  • 多行书写时,一定要记得用括号封装它们。JSX 本质上会替换成函数,由于自动分号插入机制的存在,另起一行的函数可能会导致意外结果。例如,在渲染方法内返回 JSX 代码,这也是 React 创建 UI 的方式
    以下示例可以正常运行,因为 div 元素和返回在同一行
return <div> /

但以下代码会失效

return 
    <div />

因为它会转换为以下代码

return;
React.createElement("div", null)

因此你需要将代码语句包裹在括号内:

return (
    <div />
)

2.多个属性的书写

如果元素有多个属性,一行书写一个属性,同时缩进一个层级,并保持结尾括号和开始标签对齐

<button
    foo="bar"
    veryLongPropertyName="baz"
    onSomething={this.handleSomething}
/>

3.条件语句

使用三元条件运算代替if else语句,代码更简洁

<div>
    {isLoggedIn ? <LogoutButton /> : <LoginButton />}
</div>

4.循环

如果在 JSX 模板中编写一个函数并返回数组,那么数组的每一项都会编译为一个元素

<ul>
    {users.map(user => <li>{user.name}</li>)}
</ul>

5.次级渲染

查看以下示例:

renderUserMenu() {
    // JSX 用于用户菜单
}

renderAdminMenu() {
    // JSX 用于管理员菜单
}

render() {
    return (
        <div>
            <h1>Welcome back!</h1>
            {this.userExists && this.renderUserMenu() }
            {this.userIsAdmin && this.renderAdminMenu() }
        </div>
    )
}

这种方法并不总是可以当作最佳实践,显然拆分组件的做法更好,有时这样做只是为了保持渲染方法的简洁。

5. 单引号与双引号

对于JSX 属性值总是使用双引号("), 其他均使用单引号(’)

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

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

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

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

6. 空格

JSX 处理文本和元素间的空格的方式与 HTML 不同,如以下代码片段

<div>
    <span>foo</span>
    bar
    <span>baz</span>
</div>

浏览器解析 HTML 时,以上代码会显示 foo bar baz
而 JSX 会将同一份代码渲染为 foobarbaz,这是因为嵌套的三行代码转译成了 div 元素的独立子元素,没有将空格计算在内。为了得到与 HTML 一致的输出结果,普通的解决方案是在元素间显式插入空格

<div>
    <span>foo</span>
    {' '}
    bar
    {' '}
    <span>baz</span>
</div>

这里用 JavaScriot 表达式封装了空字符串来强制编译器在元素间插入空格
另外注意以下两个书写规范

  • 总是在自动关闭的标签前加一个空格,正常情况下也不需要换行
  • 不要在JSX {} 引用括号里两边加空格
// bad
<Foo bar={ baz } />

// good
<Foo bar={baz} />

7. 属性

JSX 不是一门标准语言,需要转译成 JavaScript,因此有些属性无法使用。
如我们需要用className取代class,用htmlfor取代for

<label className="awesome-label" htmlFor="name" />

这是因为 class 和 for 都是 JavaScript 的保留字

8. 函数/方法

  • 当在 render() 里使用事件处理方法时,提前在构造函数里把 this 绑定上去

为什么? 在每次 render 过程中, 再调用 bind 都会新建一个新的函数,浪费资源.

// bad
class App extends React.Component {
  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv.bind(this)} />;
  }
}

// good
class App extends React.Component {
  constructor(props) {
    super(props);

    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv} />;
  }
}

9. 根元素

因为 JSX 元素会转换为 JavaScript 函数,但 JavaScript 不允许返回两个函数,因此如果有多个同级元素,需要强制将它们封装在一个父元素中

<div />
<div />
error: Adjacent JSX elements must be wrapped in an enclosing tag

以下写法是有效的

<div>
    <div />
    <div />
</div>

当然这么做有一个明显的缺点就是最外层多了一个不必要的DOM元素,React.Fragment组件能够在不额外创建 DOM 元素的情况下,让render()方法中返回多个元素。

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

你也可以使用其简写语法<></>

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

10. 布尔属性值

如果设置某个属性却没有赋值,那么 JSX 会默认其值为 true,这种行为类似 HTML 的 disabled 属性

11. 展开属性

向子元素传递数据时,不要按引用方式传递整个 JavaScript 对象,而要使用对象的基本类型值以方便校验。这种做法很常见,并且引发的 bug 更少。
该特性的用法如下

const foo = { id: 'bar' }
return <div {...foo} />

以上代码的转译结果如下

var foo = { id: 'bar' };
return React.createElement('div', foo);

参考资料

2018-03-25 14:57:25 abS9879 阅读数 1169

Basic Rules(基本原则)
每个文件中只包含一个React组件。

尽可能地使用JSX语法。

除非不用JSX语法创建一个应用,否则不要使用React.createElement方法。

Component(组件规范)
Class 与 React.createClass方法
尽可能地使用ES6中的类的语法,除非有特殊的对于Mixin的需求。

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

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

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

文件名:使用帕斯卡命名法命名文件,譬如ReservationCard.jsx。

引用命名:使用帕斯卡命名法命名组件和camelCase命名实例。

// bad
const reservationCard = require('./ReservationCard');

// good
const ReservationCard = require('./ReservationCard');

// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;

Declaration(声明)
不要使用displayName来命名组件,而使用引用。

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

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

Props
对于Props的命名使用camelCase。

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

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

将Props或者State的声明写在类外。

import React, { Component, PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

export default class Link extends 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;

JSX(JSX规范)
Alignment(对齐)
跟随如下的JSX的语法

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

Quotes
对于JSX的属性用双引号表示,对于其他属性,用单引号表示。

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

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

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

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

Spacing(空格)
在自闭合的标签中仅使用单空格。

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

多段
当JSX包含多行代码时,将它们包含在小括号中。

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

Methods
Naming(方法命名)
对于一个React组件的内部方法,不要使用下划线作为前缀。

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

  // other stuff
});

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

  // other stuff
});

Ordering(顺序)
React.Component子类

constructor

optional static methods

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate
10. componentWillUnmount
11. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
12. getter methods for render like getSelectReason() or getFooterContent()
13. Optional render methods like renderNavigation() or renderProfilePicture()
14. render

React.createClass

displayName

propTypes

contextTypes

childContextTypes

mixins

statics

defaultProps

getDefaultProps

getInitialState
10. getChildContext
11. componentWillMount
12. componentDidMount
13. componentWillReceiveProps
14. shouldComponentUpdate
15. componentWillUpdate
16. componentDidUpdate
17. componentWillUnmount
18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
19. getter methods for render like getSelectReason() or getFooterContent()
20. Optional render methods like renderNavigation() or renderProfilePicture()
21. render

2016-04-13 11:02:11 wushuirenjia 阅读数 1176
React Native 代码规范

https://github.com/cnsnake11/react-native-coding-style
2017-08-29 13:52:10 qq_28978893 阅读数 395

一、全局或者在当前项目中安装standard

npm install standard --save

二、安装依赖插件

npm install babel-eslint --save

三、编译器插件安装

Javascript Standard Style

四、配置setting.json

{
  "sync.anonymousGist": false,
  "javascript.validate.enable": false,
  "javascript.format.enable": false,
  "flow.useNPMPackagedFlow": true,
  //"editor.formatOnSave": true
  "standard.autoFixOnSave": true,
  "standard.options": {
    "parser": "babel-eslint",
    "globals": [
      "describe",
      "it",
      "expect",
      "test",
      "fetch",
      "FormData"
    ]
  },
  "eslint.enable": false
}

五、重启编译器查看效果

感谢英华姐,这个格式化规则完美。。。

2018-11-13 17:46:31 wellman_zyk006 阅读数 378

Airbnb React/JSX 编码规范
算是最合理的React/JSX编码规范之一了
内容目录

  1. 基本规范
  2. Class vs React.createClass vs stateless
  3. Mixins
  4. 命名
  5. 声明模块
  6. 代码对齐
  7. 单引号还是双引号
  8. 空格
  9. 属性
  10. Refs引用
  11. 括号
  12. 标签
  13. 函数/方法
  14. 模块生命周期
  15. isMounted

Basic Rules 基本规范
每个文件只写一个模块.
但是多个无状态模块可以放在单个文件中. eslint: react/no-multi-comp.
推荐使用JSX语法.
不要使用 React.createElement,除非从一个非JSX的文件中初始化你的app.
创建模块
Class vs React.createClass vs stateless
如果你的模块有内部状态或者是refs, 推荐使用 class extends React.Component 而不是 React.createClass. eslint: react/prefer-es6-class react/prefer-stateless-

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

如果你的模块没有状态或是没有引用refs, 推荐使用普通函数(非箭头函数)而不是类:

// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

Mixins
不要使用 mixins.
为什么? Mixins 会增加隐式的依赖,导致命名冲突,并且会以雪球式增加复杂度。在大多数情况下Mixins可以被更好的方法替代,如:组件化,高阶组件,工具模块等。

Naming 命名
扩展名: 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.js作为入口文件,然后直接使用 index.js 或者文件夹名作为模块的名称:

// bad
import Footer from './Footer/Footer';
// bad
import Footer from './Footer/index';
// good
import Footer from './Footer';

高阶模块命名: 对于生成一个新的模块,其中的模块名 displayName 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 withFoo(), 当传入一个 Bar 模块的时候, 生成的模块名 displayName 应该为 withFoo(Bar).
为什么?一个模块的 displayName 可能会在开发者工具或者错误信息中使用到,因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么,更好的Debug.

// bad
export default function withFoo(WrappedComponent) {
  return function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }
}

// good
export default function withFoo(WrappedComponent) {
  function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }

  const wrappedComponentName = WrappedComponent.displayName
    || WrappedComponent.name
    || 'Component';

  WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  return WithFoo;
}

属性命名: 避免使用DOM相关的属性来用作其他的用途。
为什么?对于style 和 className这样的属性名,我们都会默认它们代表一些特殊的含义,如元素的样式,CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读,更难维护,并且可能会引起bug。

// bad
<MyComponent style="fancy" />

// good
<MyComponent variant="fancy" />

Declaration 声明模块
不要使用 displayName 来命名React模块,而是使用引用来命名模块, 如 class 名称.

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

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

Alignment 代码对齐
遵循以下的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>

Quotes 单引号还是双引号
对于JSX属性值总是使用双引号("), 其他均使用单引号(’). eslint: jsx-quotes
为什么? HTML属性也是用双引号, 因此JSX的属性也遵循此约定.

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

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

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

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

Spacing 空格
总是在自动关闭的标签前加一个空格,正常情况下也不需要换行. eslint: no-multi-spaces, react/jsx-tag-spacing

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

不要在JSX {} 引用括号里两边加空格. eslint: react/jsx-curly-spacing

// bad
<Foo bar={ baz } />

// good
<Foo bar={baz} />

Props 属性
JSX属性名使用骆驼式风格camelCase.

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

标签总是添加 alt 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示,alt 可为空, 或者 要包含role=“presentation”. eslint: jsx-a11y/alt-text

// bad
<img src="hello.jpg" />

// good
<img src="hello.jpg" alt="Me waving hello" />

// good
<img src="hello.jpg" alt="" />

// good
<img src="hello.jpg" role="presentation" />

不要在 alt 值里使用如 “image”, “photo”, or "picture"包括图片含义这样的词, 中文也一样. eslint: jsx-a11y/img-redundant-alt
为什么? 屏幕助读器已经把 img 标签标注为图片了, 所以没有必要再在 alt 里说明了.

// bad
<img src="hello.jpg" alt="Picture of me waving hello" />

// good
<img src="hello.jpg" alt="Me waving hello" />

使用有效正确的 aria role属性值 ARIA roles. eslint: jsx-a11y/aria-role

// bad - not an ARIA role
<div role="datepicker" />

// bad - abstract ARIA role
<div role="range" />

// good
<div role="button" />

不要在标签上使用 accessKey 属性. eslint: jsx-a11y/no-access-key
为什么? 屏幕助读器在键盘快捷键与键盘命令时造成的不统一性会导致阅读性更加复杂.

// bad
<div accessKey="h" />

// good
<div />

避免使用数组的index来作为属性key的值,推荐使用唯一ID. (为什么?)

// bad
{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

// good
{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}

对于所有非必须的属性,总是手动去定义defaultProps属性.
为什么? propTypes 可以作为模块的文档说明, 并且声明 defaultProps 的话意味着阅读代码的人不需要去假设一些默认值。更重要的是, 显示的声明默认属性可以让你的模块跳过属性类型的检查.

// bad
function SFC({ foo, bar, children }) {
  return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};

// good
function SFC({ foo, bar, children }) {
  return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};
SFC.defaultProps = {
  bar: '',
  children: null,
};

Refs
总是在Refs里使用回调函数. eslint: react/no-string-refs

// bad
<Foo
  ref="myRef"
/>

// good
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

Parentheses 括号

将多行的JSX标签写在 ()里. eslint: react/jsx-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, 单行可以不需要
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

Tags 标签
对于没有子元素的标签来说总是自己关闭标签. 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"
/>

Methods 函数
使用箭头函数来获取本地变量.

function ItemList(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <Item
          key={item.key}
          onClick={() => doSomethingWith(item.name, index)}
        />
      ))}
    </ul>
  );
}

当在 render() 里使用事件处理方法时,提前在构造函数里把 this 绑定上去. eslint: react/jsx-no-bind
为什么? 在每次 render 过程中, 再调用 bind 都会新建一个新的函数,浪费资源.

// 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模块中,不要给所谓的私有函数添加 _ 前缀,本质上它并不是私有的.
为什么?_ 下划线前缀在某些语言中通常被用来表示私有变量或者函数。但是不像其他的一些语言,在JS中没有原生支持所谓的私有变量,所有的变量函数都是共有的。尽管你的意图是使它私有化,在之前加上下划线并不会使这些变量私有化,并且所有的属性(包括有下划线前缀及没有前缀的)都应该被视为是共有的。了解更多详情请查看Issue #1024, 和 #490 。

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

  // other stuff
});

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

  // other stuff
}

在 render 方法中总是确保 return 返回值. eslint: react/require-render-return

// bad
render() {
  (<div />);
}

// good
render() {
  return (<div />);
}

Ordering React 模块生命周期
class extends React.Component 的生命周期函数:
可选的 static 方法
constructor 构造函数
getChildContext 获取子元素内容
componentWillMount 模块渲染前
componentDidMount 模块渲染后
componentWillReceiveProps 模块将接受新的数据
shouldComponentUpdate 判断模块需不需要重新渲染
componentWillUpdate 上面的方法返回 true, 模块将重新渲染
componentDidUpdate 模块渲染结束
componentWillUnmount 模块将从DOM中清除, 做一些清理任务
点击回调或者事件处理器 如 onClickSubmit() 或 onChangeDescription()
render 里的 getter 方法 如 getSelectReason() 或 getFooterContent()
可选的 render 方法 如 renderNavigation() 或 renderProfilePicture()
render 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 的生命周期函数,与使用class稍有不同: eslint: react/sort-comp
displayName 设定模块名称
propTypes 设置属性的类型
contextTypes 设置上下文类型
childContextTypes 设置子元素上下文类型
mixins 添加一些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
isMounted
不要再使用 isMounted. eslint: react/no-is-mounted
为什么? isMounted 反人类设计模式:(), 在 ES6 classes 中无法使用, 官方将在未来的版本里删除此方法.

React代码开发规范

阅读数 229

react native建议的规范化布局

博文 来自: qq_41915690
没有更多推荐了,返回首页