React Native:Component 详解

组件是在React Native的核心,不管是内间的组件,如ViewTextImage 等 还是我们自己创建的自定义组件。本篇文章将详解Component在React Native中的用法。

一、组件的创建

有两种方式创建组件:

1.1 React.createClass()

var MyComponent = React.createClass({
// 定义prop的类型
propTypes: {
title: React.PropTypes.string,
bgcolor: React.PropTypes.string
},
// 获取默认的props
getDefaultProps() {
return {
title: 'default title',
bgcolor: 'red'
};
},
// 获取默认的状态
getInitialState(){
return {
count: 1
};
},
render: function(){
return (
<View style={{backgroundColor:this.props.bgcolor}}>
<Text>{this.props.title}</Text>
</View>
);
}
});

1.2 继承Component

class MyComponent extends React.Component {
constructor(props){
super(props);
this.state = {
count: 1
};
}
render (){
return (
<View style={{backgroundColor:this.props.bgcolor}}>
<Text>{this.props.title}</Text>
</View>
);
}
}
MyComponent.propTypes = {
title: React.PropTypes.string,
bgcolor: React.PropTypes.string
};
MyComponent.defaultProps = {
title: 'this is title',
bgcolor: 'red'
};

实际上继承Component是ES6的写法, createClass({})是ES5的写法。facebook推荐是用ES6的写法。

注意到React.create方法中参数是一个对象,实际

createClass()方式在对象中定义propTypes,而

<MyComponent title='this is real title' bgcolor='green'/>

组件的状态

setState

void setState(
function|object nextState,
[function callback]
)

shouldComponentUpdate()

setState()会触发render(),如果我们想要在设置state之后不触发render,可以重写 should

updateState

类似于setState,但是会删掉之前已经存在的key。即

this.setState({title:'a title', color:'red});
this.updateState({count:10});
console.log(this.state);

二、组件的生命周期

下图展示了组件的整个生命周期,从构造函数开始直到生命周期结束。

下表详解解释了组件的生命周期

方法名 触发时机 说明
componentWillMount Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.
render 在componentWillMount完成后调用,该方法定义如何渲染组件 会被调用多次,初始化渲染的时候以及props或者state更新的时候
componentDidMount 在渲染完成之后立即被调用,该方法仅被调用一次 在这个时机我们可以
componentWillReceiveProps 1 2
shouldComponentUpdate 收到新的props或者state的时候,在渲染之前被调用 mark
componentWillUpdate 在设置新的props或者state后在渲染之前被调用 组件初始化渲染的时候这个方法不会被调用
componentDidUpdate Invoked immediately after the component’s updates are flushed to the DOM 组件初始化渲染的时候这个方法不会被调用
componentWillUnMount 组件卸载的时候调用 2

props vs state

初学者可能对到底是使用props还是state感到困惑,如下是他们的使用:

1、 使用props在组件树种传递数据

<MyComponent id='10000' name='Beijing'/>

2、 不要在组件的内部修改 this.props属性(或者调用this.setprops() ),把props想象为不可变的

3、使用state

Never modify this.props or call this.setprops inside of a component; consider props immutable.
Use props to for event handlers to communicate with child components.
Use state for storing simple view state like wether or not drop-down options are visible.
Never modify this.state directly, use this.setstate instead.

三、组件之间的通信

组件跟组件之间。

父到子之间的通信

父容器将参数通过props参数传递给

子到父之间的通信

四、可重用的组件

facebook推荐我们在构造函数中对方法进行一次性绑定。



五、实战:创建自己的Button