An open API service indexing awesome lists of open source software.

https://github.com/onface/react-spec


https://github.com/onface/react-spec

Last synced: 14 days ago
JSON representation

Awesome Lists containing this project

README

        

# react-spec

## defaultProps

任何时候每个 React Component 必须有 defaultProps

## propTypes

任何时候每个 React Component 必须有 propTypes

## 创建模块

Class vs React.createClass vs stateless

- 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass`.
eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)

```jsx
// bad
const Listing = React.createClass({
// ...
render() {
return

{this.state.hello}
;
}
});

// good
class Listing extends React.Component {
// ...
render() {
return

{this.state.hello}
;
}
}
```

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

```jsx
// bad
class Listing extends React.Component {
render() {
return

{this.props.hello}
;
}
}

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

{hello}

);

// good
function Listing({ hello }) {
return

{hello}
;
}
```

## Alignment 代码对齐

- 遵循以下的JSX语法缩进/格式. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)

```jsx
// bad

// good, 有多行属性的话, 新建一行关闭标签

// 若能在一行中显示, 直接写成一行

// 子元素按照常规方式缩进



```

## Quotes 单引号还是双引号

- 对于JSX属性值总是使用双引号(`"`), 其他均使用单引号(`'`). eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes)

> 为什么? HTML属性也是用双引号, 因此JSX的属性也遵循此约定.

```jsx
// bad

// good

// bad

// good

```

## Ordering React 模块生命周期

- `class extends React.Component` 的生命周期函数:

1. 可选的 `static` 方法
1. `constructor` 构造函数
1. `getChildContext` 获取子元素内容
1. `componentWillMount` 模块渲染前
1. `componentDidMount` 模块渲染后
1. `componentWillReceiveProps` 模块将接受新的数据
1. `shouldComponentUpdate` 判断模块需不需要重新渲染
1. `componentWillUpdate` 上面的方法返回 `true`, 模块将重新渲染
1. `componentDidUpdate` 模块渲染结束
1. `componentWillUnmount` 模块将从DOM中清除, 做一些清理任务
1. *点击回调或者事件处理器* 如 `onClickSubmit()` 或 `onChangeDescription()`
1. *`render` 里的 getter 方法* 如 `getSelectReason()` 或 `getFooterContent()`
1. *可选的 render 方法* 如 `renderNavigation()` 或 `renderProfilePicture()`
1. `render` render() 方法

- 如何定义 `propTypes`, `defaultProps`, `contextTypes`, 等等其他属性...

```jsx
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 {this.props.text};
}
}

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

export default Link;
```

- `React.createClass` 的生命周期函数,与使用class稍有不同: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)

1. `displayName` 设定模块名称
1. `propTypes` 设置属性的类型
1. `contextTypes` 设置上下文类型
1. `childContextTypes` 设置子元素上下文类型
1. `mixins` 添加一些mixins
1. `statics`
1. `defaultProps` 设置默认的属性值
1. `getDefaultProps` 获取默认属性值
1. `getInitialState` 或者初始状态
1. `getChildContext`
1. `componentWillMount`
1. `componentDidMount`
1. `componentWillReceiveProps`
1. `shouldComponentUpdate`
1. `componentWillUpdate`
1. `componentDidUpdate`
1. `componentWillUnmount`
1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()`
1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()`
1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()`
1. `render`

## isMounted

- 不要再使用 `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)

> 为什么? [`isMounted` 反人类设计模式:()][anti-pattern], 在 ES6 classes 中无法使用, 官方将在未来的版本里删除此方法.

[anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

## value onChange data

表单控件的输入接口为 `value` ,`value` 可以是一个 `object` 包含多个值
表单控件的输出接口优先为 `onChange`,`onChange` 回调参数与 `value` 格式一致
表单控件的数据配置接口为 `data`

```jsx

```