整理一下react-native开发规范

2017-03-10  本文已影响0人  这个大叔有丶冷
代码组织结构
SomeComponent // 首字母大写,文件夹
  index.js // 入口,为了引用方便,里面只需要import default from ‘./SomeCompoent'
  SomeComponent.js // 首字母大写,具体实现,为了查找文件方便,都叫index.js也是灾难
  SomeComponent.test.js // 首字母大写,使用jest框架做单元测试

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

代码规范

  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: {
  }
});
上一篇下一篇

猜你喜欢

热点阅读