美文网首页
整理一下react-native开发规范

整理一下react-native开发规范

作者: 这个大叔有丶冷 | 来源:发表于2017-03-10 10:51 被阅读0次
代码组织结构
SomeComponent // 首字母大写,文件夹
  index.js // 入口,为了引用方便,里面只需要import default from ‘./SomeCompoent'
  SomeComponent.js // 首字母大写,具体实现,为了查找文件方便,都叫index.js也是灾难
  SomeComponent.test.js // 首字母大写,使用jest框架做单元测试

对于展示组件,要求一定要在文件的最开始定义PropTypes,写上组件所支持的props,并简单说明每个prop是什么含义。

代码规范
  • propTypes统一写在文件最开始,把组件支持的所有属性以及类型列出来,给出注释
  • constructor里把组件的state全部初始化
  • 组件内的代码顺序为:

  1. propTypes定义
  2. static方法
  3. constructor
  4. public方法(准备公开给外部调用的方法)
  5. 组件生命周期方法
  6. render方法
  7. 私有方法(必须以_开头)

示例:

//LearnReactNative.js
  
//文件最开始把propTypes提出来,方便阅读
const propTypes = {
  // 属性描述
  sampleProp: PropTypes.bool.isRequired
}
  
class LearnReactNative extends Component {
  //propTypes定义
  static propTypes = propTypes;
  
  //如果需要定义static方法,放在这里
  static getSampleProp(): boolean {
    return true;
  }   
  
  //constructor方法,里面要初始化state
  constructor(props) {
    super(props);
    this.state = {
      sampleState: this.props.sampleProp
    }
  }
  
  //准备公开给外部调用的方法
  publicMethod() {
  }
   
  //生命周期方法(按需添加)
  componentWillMount() {}
  componentDidMount() {}
  componentWillReceiveProps() {}
  shouldComponentUpdate() {}
  componentWillUpdate() {}
  componentDidUpdate() {}
  
  //render方法
  render() {
    if(this.state.sampleState) {
      return <Text>This is the sample component</Text>
    } else {
      return <Text>Please reInit this component.</Text>
    }
  }
  
  //私有方法,名字要以_开头
  _privateMethod() {
  }
}
  
const styles = StyleSheet.create({
  xx: {
  }
});

相关文章

  • 整理一下react-native开发规范

    代码组织结构 对于展示组件,要求一定要在文件的最开始定义PropTypes,写上组件所支持的props,并简单说明...

  • [React-Native]开发规范文档

    React-Native开发规范 标签(空格分隔): React-Native JavaScript 一、编程规约...

  • iOS开发规范

    编写目的 年底工作汇报的时候有同事提出开发规范的问题,抽空就整理了一下iOS开发的代码规范。制定开发规范,可以在团...

  • 20170317 Guidelines & AppSto

    Guidelines iOS开发规范整理 Objective-C编码规范:26个方面解决iOS开发问题 iOS开发...

  • Android开发规范

    Android开发规范有助于提高开发效率,整理,搜集开发规范后,如下 比较全面具体的规范来自:原创文章,转载请注明...

  • css命名整理

    文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...

  • css命名规范整理

    文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...

  • windows系统安装配置react-native运行环境

    最近公司要开发react-native项目,自己在windows系统上练习了一下,过程中发现好多问题,在这里整理出...

  • iOS开发规范整理

    【 题注】由于公司正在准备招新的iOS开发工程师,到时有些iOS开发者参与进来。这时如果每个人的Objecti...

  • 移动端iOS开发规范文档

    移动端iOS开发规范文档 序言 根据网上的一些OC编码规范整理归纳而成,为了利于项目维护以及规范开发,促进成员之间...

网友评论

      本文标题:整理一下react-native开发规范

      本文链接:https://www.haomeiwen.com/subject/wjengttx.html