精益 React 学习指南 (Lean React)- 4.1 react 代码规范

前端之家收集整理的这篇文章主要介绍了精益 React 学习指南 (Lean React)- 4.1 react 代码规范前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

书籍完整目录

4.1 react 代码规范

  • 关于

  • 基础规范

  • 组件结构

  • 命名规范

  • jsx 书写规范

  • eslint-plugin-react

关于

代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通,好的模式能够上层设计上避免不必要的 bug 出现。本节会参考社区提供一些 React 的规范和优秀的设计模式。

基础规范

  1. 统一全部采用 Es6

  2. 组件文件名称采用大驼峰命名

组件结构

总体规则: stateless(Function) 优先于 Es6 Class 优先于 React.createClass;
书写规则: 规范组件内部方法的定义顺序

  • Es6 class 定义规范:

  1. static 方法

  2. constructor

  3. getChildContext

  4. componentWillMount

  5. componentDidMount

  6. componentWillReceiveProps

  7. shouldComponentUpdate

  8. componentWillUpdate

  9. componentDidUpdate

  10. componentWillUnmount

  11. clickHandlers + eventHandlersonClickSubmit()onChangeDescription()

  12. getter methods for rendergetSelectReason()getFooterContent()

  13. render methodsrenderNavigation()renderProfilePicture()

  14. render

以 Es6 Class 定义的组件为例;

const defaultProps = {
  name: 'Guest'
};
const propTypes = {
  name: React.PropTypes.string
};
class Person extends React.Component {

  // 构造函数
  constructor (props) {
    super(props);
    // 定义 state
    this.state = { smiling: false };
    // 定义 eventHandler
    this.handleClick = this.handleClick.bind(this);
  }

  // 生命周期方法
  componentWillMount () {},componentDidMount () {},componentWillUnmount () {},// getters and setters
  get attr() {}

  // handlers
  handleClick() {},// render
  renderChild() {},render () {},}

/**
 * 类变量定义
 */
Person.defaultProps = defaultProps;

/**
 * 统一都要定义 propTypes
 * @type {Object}
 */
Person.propTypes = propTypes;

命名规范

jsx 书写规范

  • 自闭合

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

// good
<Foo className="stuff" />
// 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" />
  • 返回

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

规范可以使用 eslint-plugin-react 插件来强制实施,规则和配置可查看
https://github.com/yannickcr/eslint-plugin-react

更多 react 代码规范可参考 https://github.com/airbnb/javascript/tree/master/react

原文链接:https://www.f2er.com/react/306520.html

猜你在找的React相关文章