zoukankan      html  css  js  c++  java
  • 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 + eventHandlers 如 onClickSubmit() 或 onChangeDescription()

    12. getter methods for render 如 getSelectReason() 或 getFooterContent()

    13. render methods 如 renderNavigation() 或 renderProfilePicture()

    14. render

    以 Es6 Class 定义的组件为例;

    const defaultProps = {
      name: 'Guest'
    };
    const propTypes = {
      name: React.PropTypes.string
    };
    class Person extends React.Component {
    
      // 构造函数
      constructor (props) {
        super(props);
        // 定义 statethis.state = { smiling: false };
        // 定义 eventHandlerthis.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;

    命名规范

    • 组件名称:大驼峰

    • 属性名称:小驼峰

    • 事件处理函数:handleSomething

    • 自定义事件属性名称:onSomething={this.handleSomething}

    • key: 不能使用数组 index ,构造或使用唯一的 id

    • 组件方法名称:避免使用下划线开头的命名

    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





  • 相关阅读:
    OSPF
    【今日CS 视觉论文速览】 24 Jan 2019
    【今日CS 视觉论文速览】Wed, 23 Jan 2019
    【今日CS 视觉论文速览】 21 Jan 2019
    【Processing学习笔记】安装与入门
    【今日CS 视觉论文速览】Part2, 18 Jan 2019
    【今日CS 视觉论文速览】Fri, 18 Jan 2019
    【今日CS 视觉论文速览】Thu, 17 Jan 2019
    【今日CS 视觉论文速览】Part2, 16 Jan 2019
    【今日CS 视觉论文速览】Wed, 16 Jan 2019
  • 原文地址:https://www.cnblogs.com/itlyh/p/6020634.html
Copyright © 2011-2022 走看看