React Native -- The Life-Cycle of a Composite Component
发布时间:2020-12-15 04:47:12 所属栏目:百科 来源:网络整理
导读:/** * ------------------ The Life-Cycle of a Composite Component ------------------ * * - constructor: Initialization of state. The instance is now retained. * - componentWillMount * - render * - [children's constructors] * - [children's c
/** * ------------------ The Life-Cycle of a Composite Component ------------------ * * - constructor: Initialization of state. The instance is now retained. * - componentWillMount * - render * - [children's constructors] * - [children's componentWillMount and render] * - [children's componentDidMount] * - componentDidMount * * Update Phases: * - componentWillReceiveProps (only called if parent updated) * - shouldComponentUpdate * - componentWillUpdate * - render * - [children's constructors or receive props phases] * - componentDidUpdate * * - componentWillUnmount * - [children's componentWillUnmount] * - [children destroyed] * - (destroyed): The instance is now blank,released by React and ready for GC. * * ----------------------------------------------------------------------------- */ 测试用例--不更新:
var SampleApp = React.createClass({ getInitialState: function() { console.log('getInitialState'); return { teams: null,}; },componentWillMount: function(){ console.log('componentWillMount'); },getDefaultProps: function() { console.log('getDefaultProps'); },componentDidMount: function() { console.log('componentDidMount'); },render: function() { console.log('render'); return this.renderLoadingView(); },componentWillUpdate:function(){ console.log('componentWillUpdate'); },componentWillUnmount:function(){ console.log('componentWillUnmount'); },renderLoadingView: function() { return ( <View style={styles.container}> <Text> The Life-Cycle of a Composite Component </Text> </View> ); },});测试结果:
2015-10-09 16:52:34.591 [info][tid:com.facebook.React.JavaScript] 'getDefaultProps' 2015-10-09 16:52:34.612 [info][tid:com.facebook.React.JavaScript] 'Running application "SampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true,development-level warning are ON,performance optimizations are OFF' 2015-10-09 16:52:34.620 [info][tid:com.facebook.React.JavaScript] 'getInitialState' 2015-10-09 16:52:34.621 [info][tid:com.facebook.React.JavaScript] 'componentWillMount' 2015-10-09 16:52:34.621 [info][tid:com.facebook.React.JavaScript] 'render' 2015-10-09 16:52:34.625 [info][tid:com.facebook.React.JavaScript] 'componentDidMount' 测试用例--更新:
var REQUEST_URL = 'http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json'; var SampleApp = React.createClass({ getInitialState: function() { console.log('getInitialState'); return { teams: null,componentDidMount: function() { console.log('componentDidMount'); this.fetchData(); },render: function() { console.log('render'); if (!this.state.teams) { this.state.times += 1; return this.renderLoadingView(); } this.state.times += 1; var team = this.state.teams[1]; return this.renderTeam(team); },fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ teams: responseData.result.data,}); }) .done(); },renderLoadingView: function() { return ( <View style={styles.container}> <Text> Loading teams... </Text> </View> ); },renderTeam: function(team) { return ( <View style={styles.container}> <Image source={{uri: team.logo}} style={styles.thumbnail}> </Image> <View style={styles.rightContainer}> <Text style={styles.name}>{team.team_cn}</Text> <Text style={styles.rank}>{team.team_order},{this.state.times}</Text> </View> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: { width: 53,height: 81,marginLeft: 10,rightContainer: { flex: 1,name: { fontSize: 20,marginBottom: 8,textAlign: 'center',rank: { textAlign: 'center',}); 测试结果:
2015-10-09 16:54:50.082 [info][tid:com.facebook.React.JavaScript] 'getDefaultProps' 2015-10-09 16:54:50.102 [info][tid:com.facebook.React.JavaScript] 'Running application "SampleApp" with appParams: {"rootTag":1,performance optimizations are OFF' 2015-10-09 16:54:50.109 [info][tid:com.facebook.React.JavaScript] 'getInitialState' 2015-10-09 16:54:50.109 [info][tid:com.facebook.React.JavaScript] 'componentWillMount' 2015-10-09 16:54:50.110 [info][tid:com.facebook.React.JavaScript] 'render' 2015-10-09 16:54:50.113 [info][tid:com.facebook.React.JavaScript] 'componentDidMount' 2015-10-09 16:54:50.237 [info][tid:com.facebook.React.JavaScript] 'componentWillUpdate' 2015-10-09 16:54:50.237 [info][tid:com.facebook.React.JavaScript] 'render' 组件的生命周期组件的生命周期主要由三个部分组成:
React提供了方法,让我们在组件状态更新的时候调用,will标识状态开始之前,did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。 Mounting
Updating
Unmounting
Mounted Methods
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容