一、组件的属性(props)和状态(state)
参考:https://www.jianshu.com/p/72f8c1da0b65
1. 属性(props)
它是组件的不可变属性(组件自己不可以自己修改props)。
组件自身定义了一组props作为对外提供的接口,展示一个组件时只需要指定props作为节点的属性。
一般组件很少需要对外公开方法(例外:工具类的静态方法等),唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。
组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。
2. 状态(state)
它是组件的内部状态属性,主要用来存储组件自身需要的数据。
除了初始化时可能由props来决定,之后就完全由组件自身去维护。
组件中由系统定义了setState方法,每次调用setState时都会更新组件的状态,触发render方法重新渲染界面。
需要注意的是render方法是被异步调用的,这可以保证同步的多个setState方法只会触发一次render,这样做是有利于提高性能的。
二、组件的生命周期
React Native组件的生命周期见图1,https://blog.csdn.net/mikuoohash/article/details/79945801 此图来源于此。为了验证,自己写了一个Demo,顺序都是以warn 的形式显示。特别注意的是对于componentWillReceiveProps()验证,是在主组件设了一个定时器,改变一个属性,再传给子组件进行显示时,会调用子组件的componentWillReceiveProps()方法,可以看到warn显示了"one"。
App.js 文件:
import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
import Greeting from './Greeting.js'
export default class HelloWorldApp extends Component {
constructor(props) {
super(props);
console.warn("____constructor__");
this.state = {
firstName: "--firstName",
lastName: "--lastName",
count: 1,
content:100,
};
this.ffff = "aaaa";
}
componentWillMount() {
console.warn("___componentWillMount__");
}
render() {
console.warn("___render__");
console.warn(this.ffff);
console.warn(this.state.count);
return (
<View>
<Text
onPress={() => {
console.warn("点击了text");
this.ffff = "ffff改变了";
this.setState({
count: this.state.count + 1
});
}}
style={styles.click}
>
点击计数会增加1
</Text>
<Greeting content = {this.state.content}/>
<Text style={styles.red}>{this.state.firstName}</Text>
</View>
);
}
//这个函数也是只被调用一次,这个函数之后,就进入了稳定的运行状态,等待事件触发。
componentDidMount() {
console.warn("--componentDidMount--");
setTimeout(() => this.setState({content: 199}), 1000);
}
//状态更新的过程
shouldComponentUpdate() {
console.warn("--shouldComponentUpdate--");
return true;
}
componentWillUpdate() {
console.warn("--componentWillUpdate--");
}
//render
componentDidUpdate() {
console.warn("--componentDidUpdate--");
}
//组件关闭
componentWillUnmount() {
console.warn("--componentWillUnmount--");
console.log("取消计时器网络请求等");
}
}
const styles = StyleSheet.create({
click: {
backgroundColor: "green",
marginTop: 50,
width: 300,
height: 50
},
red: {
backgroundColor: "red",
marginTop: 50,
width: 300,
height: 50,
alignItems: "center"
}
});
在Greeting.js:
import React, { Component } from "react";
import { Text, View, StyleSheet, Alert } from "react-native";
import PropTypes from "prop-types";
export default class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.content
};
}
render() {
return (
<View style={{ alignItems: "center" }}>
<Text style={styles.textStyle}>{"This is a text:" + this.state.text}</Text>
</View>
);
}
componentWillReceiveProps(nextProps) {
console.warn("one");
if (nextProps.content !== this.props.content) {
//属性改变了,重新刷新!!
this.setState({text: nextProps.content});
}
}
}
const styles = StyleSheet.create({
textStyle: {
backgroundColor: "blue",
marginTop: 10,
width: 150,
height: 40,
alignItems: "center"
}
});
效果图如下所示:
这就是今天的一点点收获,很多都还没理解,有待继续加强。
这篇文章不错:https://www.jianshu.com/p/72f8c1da0b65,很感谢!