代码组织结构
SomeComponent // 首字母大写,文件夹
index.js // 入口,为了引用方便,里面只需要import default from ‘./SomeCompoent'
SomeComponent.js // 首字母大写,具体实现,为了查找文件方便,都叫index.js也是灾难
SomeComponent.test.js // 首字母大写,使用jest框架做单元测试
对于展示组件,要求一定要在文件的最开始定义PropTypes,写上组件所支持的props,并简单说明每个prop是什么含义。
代码规范
- propTypes统一写在文件最开始,把组件支持的所有属性以及类型列出来,给出注释
- constructor里把组件的state全部初始化
- 组件内的代码顺序为:
- propTypes定义
- static方法
- constructor
- public方法(准备公开给外部调用的方法)
- 组件生命周期方法
- render方法
- 私有方法(必须以_开头)
示例:
//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: {
}
});
网友评论