https://github.com/onface/react-spec
https://github.com/onface/react-spec
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/onface/react-spec
- Owner: onface
- Created: 2017-07-21T08:26:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-27T02:04:26.000Z (over 7 years ago)
- Last Synced: 2025-02-17T09:43:11.198Z (3 months ago)
- Language: HTML
- Size: 6.84 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
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
```