版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gzx110304/article/details/80057663
React Native 创建组件的三种方式
1.以Es6形式创建组件
export class ComponentByEs6 extends Component {
render() {
return (<View
style={
{
flex:1,
backgroundColor:'#ff0000',
alignItems:'center',
justifyContent:'center'
}
}>
<Text>
ComponentByEs6
</Text>
</View>);
}
}
1.1.Es6创建的组件具有如下特性
Es6创建的组件,其成员函数不会自动邦定this,也就是说,如果我们不手动为成员函数绑定this,我们在成员函数内部拿到的this引用并没有指向当前的组件类
export class ComponentByEs6 extends Component { onTextClick() { console.info(this instanceof ComponentByEs6);//输出false } render() { return (<View ... }> <Text onPress={ this.onTextClick }> ComponentByEs6 </Text> </View>); } }
Es6创建的组件有三种方法可以为成员函数绑定this:可以在构造函数中完成绑定,也可以在调用时使用method.bind(this)来完成绑定,还可以使用arrow function来绑定
//在构造函数中绑定 constructor(props) { super(props); this.onTextClick=this.onTextClick.bind(this); } <Text onPress={ this.onTextClick }> ComponentByEs6 </Text> //调用时绑定 <Text onPress={ this.onTextClick.bind(this) }> ComponentByEs6 </Text> //箭头函数绑定 <Text onPress={ () => this.onTextClick() }> ComponentByEs6 </Text>
当手动为其成员函数绑定this后,函数中的
console.info(this instanceof ComponentByEs6);
将输出true
配置组件属性类型propTypes及其默认props属性defaultProps
Es6创建的组件,在配置propTypes及其defaultProps时,应作为组件类的属性来配置,也就是类的静态属性来配置/** * 注意:React.PropTypes从0.48开始被删除,可以使用 * prop-types包中的PropTypes替代 */ export class ComponentByEs6 extends Component { static propTypes = { text: PropTypes.string }; static defaultProps = { text: '' }; ... }
配置组件的初始状态state
Es6创建的组件,其初始状态state是作为组件的属性,在组件的constructor方法中进行配置的export class ComponentByEs6 extends Component { ... constructor(props) { super(props); this.state = { count: 0 }; } ... }
2.以Es5的形式创建组件
/**
* Es5方式创建组件
* 注意:React.createClass从0.48开始被删除,可以使用
* create-react-class 包中的 createReactClass 方法替代
*/
export const ComponentByEs5 = createReactClass({
render: function() {
return (<View
style={
{
flex:1,
backgroundColor:'#ff0000',
alignItems:'center',
justifyContent:'center'
}
}>
<Text>
ComponentByEs5
</Text>
</View>);
}
});
2.1.Es5创建的组件具有如下特性
Es5创建的组件,其成员函数会自动绑定this,也就是说,在任何时候,我们通过this拿到的对象,都是指向当前的组件类的
export const ComponentByEs5 = createReactClass({ render: function() { return (<View style={ { flex:1, backgroundColor:'#ff0000', alignItems:'center', justifyContent:'center' } }> <Text onPress = { this.onTextClick }> ComponentByEs5 </Text> </View>); }, onTextClick: function() { console.info(this instanceof ComponentByEs5);//输出true } });
配置组件属性类型propTypes及其默认props属性defaultProps
Es5创建的组件,其propTypes及其默认props属性defaultProps会作为组件实例的属性来进行配置,其中defaultProps是通过组件的getDefaultProps方法来获取的export const ComponentByEs5 = createReactClass({ propTypes: { text: PropTypes.string, }, getDefaultProps: function() { return { text:'' }; }, ... });
配置组件的初始状态state
Es5创建的组件,其初始状态state是通过getInitialState方法来进行配置的export const ComponentByEs5 = createReactClass({ ... getInitialState: function () { return { count:0 }; }, ... });
3.通过函数创建组件
export function FunctionComponent() {
return (
<View
style={
{
flex:1,
backgroundColor:'#ff0000',
alignItems:'center',
justifyContent:'center'
}
}>
<Text>
FunctionComponent
</Text>
</View>
);
}
3.1.通过函数创建的组件具有如下特性
- 组件不会被实例化,整体渲染性能得到提升
- 组件不能访问this对象
- 组件无法访问生命周期的方法
- 组件只能访问输入的props